个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
我有一个 svg 三 Angular 形，我把它放在了部分的顶部:
position: relative;
top: 0;
left: 0;
我的 svg:
<svg version="1.1" class="triangle_top" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="480px" height="155.5px" viewBox="0 0 480 155.5" style="enable-background:new 0 0 480 155.5;" xml:space="preserve">
<g>
<polygon style="fill:#fd7013;" points="480,155.5 0.5,70.9 0.5,0.3 324.2,0.3 "/>
</g>
<rect x="35.7" y="21.5" style="fill:none;" width="289.1" height="28.2"/>
<text transform="matrix(1 0 0 1 35.7373 46.6423)" style="fill:#fff; font-family:'Lato'; font-size:33.8486; font-weight: bold;">title</text>
</svg>
当屏幕小于 <450 像素时，我将宽度(媒体查询)更改为:
width: 100%;
但我的 svg 不在顶部:0 :(屏幕:http://prntscr.com/aa27iy
如何使我的 svg 响应并始终在顶部:0？
最佳答案
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Prueba</title>
<style>
#section{
background-color: #fc7013;
position: relative;
height: 500px;
padding: 80px 0px;
}
svg{
position: absolute;
top: 0;
left: 0;
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<section id="section">
<svg version="1.1" class="triangle_top" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="480px" height="155.5px" viewBox="0 0 480 155.5" style="enable-background:new 0 0 480 155.5;" xml:space="preserve">
<g>
<polygon style="fill:#fff;" points="480,155.5 0.5,70.9 0.5,0.3 324.2,0.3 "/>
</g>
<rect x="35.7" y="21.5" style="fill:none;" width="289.1" height="28.2"/>
<text transform="matrix(1 0 0 1 35.7373 46.6423)" style="fill:#fd7013; font-family:'Lato'; font-size:33.8486; font-weight: bold;">#exampletext</text>
</svg>
<H1>TITLE</H1>
</section>
</body>
</html>
看，这对我有用 
关于html - 缩放 SVG 图像- viewbox，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35736020/
24
4
0
我试图理解在 svg 中定位。 假设你有... ，其中 viewBox 的大小正确，以适合给定(已知)字体、字体粗细和字体大小的文本。没有给出一个x="..." y="..."翻译后，它不会在 vie
我使用 viewBox 来模拟路径的百分比值，如下所示: 这意味着一个单位有 5px。除了笔画始终为 5px 宽度外，这按预期工作。如何将笔画的宽度设置为始终 1px ？我已经试过了 strok
是否可以链接两个 ViewBox，以便它们始终使用相同的比例因子？ 或者是否有可能提取 ViewBox 的当前比例因子以在另一个元素的 ScaleTransform 中使用？ 谢谢你。 最佳答案 我想
我想知道 svg 元素的 View 框是否有任何硬性限制。当我达到非常低的值(比如当 vb 宽度约为 .002 时)或非常大的值时，我看到奇怪的剪裁，firefox 开始在 200000000 宽度左
我正在使用 View 框来缩放文本 block 。但是当文本 block 的字体大小低于某个字体大小时，我想用...修剪文本并停止缩放。 我怎样才能做到这一点？
假设我有以下简单的 SVN: 现在我想在圆旁边添加一个文本，它与圆的高度相同，在所选坐标系中为 0.2。 我怎样才能做到这一点？ 最佳答案 嗯，天真的答案是使用圆的直径作为您的尺寸。即，f
在这个例子中，绿色圆圈被切断 见:http://jsfiddle.net/sCzZT/ 请注意，每个圆圈都包裹在自己的 svg 中 在这个例子中(没有嵌套的 svgs)，绿色圆
我有一个带有 Canvas Child 的 Viewbox， 我有要填充的 Viewbox 的 Stretch 属性， 我更改了 Viewbox 的宽度和高度， 我需要获取 Canvas 中子项相对于
我有一个带有 Viewbox 的 WPF 窗口。我希望此 Viewbox 的其中一个子元素在任何屏幕分辨率下都保持相同的大小。 我的 XAML: Vi
这个问题在这里已经有了答案: Content of a Button Style appears only in one Button instance (3 个回答) 关闭4年前。 运行 Visua
This question有助于理解 viewBox 的用途，但并不完全相同。 目标是用相应的 viewBox 属性替换 SVG 元素的宽度和高度属性。我们的代码需要设置 viewBox，而不是宽度和
这个问题已经有答案了: How to parse SVG element's viewBox x, y, width and height values? (3 个回答) 已关闭 3 年前。 我是一个
我尝试使用 viewBox 在拉斐尔纸上用鼠标滚轮进行缩放。 Here是 JSFiddle 代码。 它有效，但现在我想放大中心，但我不知道从哪里开始。我想我应该更改 viewBox x 和 y 坐标。
我想创建可重复使用的形状，这些形状在使用时会自动缩放以适应给定视口(viewport)的大小。 我的方法是将形状包含在“symbol”元素中，并为其提供一个与形状本身大小相同的 viewBox。 这似
我想创建可重复使用的形状，这些形状在使用时会自动缩放以适应给定视口(viewport)的大小。 我的方法是将形状包含在“symbol”元素中，并为其提供一个与形状本身大小相同的 viewBox。 这似
如何通过vue.js自动评估SVG的viewbox？ 我的代码: Vue.component('icon', { props: { width: { type: Number,
如何使用 XAML 和 UWP 将 Image 在 Viewbox 中垂直和水平居中？给定一个可变尺寸的图像，我需要将其缩放到容器的宽度，同时将其裁剪到特定的纵横比。 我尝试将图像的宽度和高度设置为所
我在我的项目中基于 d3.v2 库创建了力布局图。它在几乎所有部分都运行良好，但有一件事我想改变。因此，当我之后将节点拖出图形 block 时，我无法到达它。为了解决这个问题，我为我的图形添加了 vi
很久以前我做了一个 jsfiddle 来演示如何缩放到中心 ( http://jsfiddle.net/Y69nm/1/ )。现在我想缩放到给定点(光标)，就像 googleMap 一样，但不知道该怎
我很惊讶我无法通过谷歌搜索找到它，但我在 WPF 窗口中有一个 Viewbox，我想通过代码向它添加一个 UserControl。 View 框是空的，它只是在某些事件期间弹出一个“等待微调器”(我厌
我是一名优秀的程序员,十分优秀！