如何在HTML/CSS中裁剪SVG文件
nev*_*int 17 html css svg image
我有以下HTML文件(mypage.html).SVG 文件
作为图像附加到其中.
<!doctype html>
<html>
<body>
<!-- Display legend -->
<div>
<center> <img src="circos-table-image-medium.svg" height=3500; width=3500; /> </center>
</div>
</body>
</html>
它生成的页面如下所示:
请注意,圆周围有一个很大的空白区域.如何在html或CSS中裁剪？
Per*_*ijn 32
作物
您可以使用负边距裁剪父元素的大小来裁剪图像:
但这是一个SVG!
您不仅可以直接在html中显示svg:
<svg viewBox="0 0 100 100" height="150px" width="150px">
<rect x="10" y="10" rx="5" width="80" height="80" fill="pink" stroke="green" stroke-width="5"/>
</svg>但要裁剪/调整大小和svg你可以简单地改变svg上的viewBox属性:
viewBox="0 0 100 100"
将显示x和y的0和100单位内的任何内容
viewBox="-100 -100 100 100"
将显示从-100到100单位x&y的任何内容
viewBox="50 50 500 500"
将显示50到500个单位x&y的任何内容
- 我需要以编程方式进行.Cos,这些数字是在Web应用程序中生成的. (3认同)
- 我怎样才能在 html 中使用你的`viewbox` 方法处理 SVG *file*？ (2认同)
Pie*_*syP 12
你可以用片段标识符做你想做的事。片段标识符允许您定义要在 img 标签中显示的 SVG 片段，并允许控制图像转换和纵横比。
添加#svgView(viewBox(0, 0, 32, 32))到 svg url 的末尾定义了要显示的 svg 区域。前两个参数是视图框左上角的 x 和 y 坐标，后两个参数是视图框的宽度和高度。
使用此技术，您的 img 标签将如下所示：
<img src="circos-table-image-medium.svg#svgView(viewBox(0, 0, 32, 32))" height="3500" width="3500" />
确保 viewbox 的纵横比与 img 标签的纵横比匹配很重要，否则您的 viewbox 将无法正确调整大小/对齐。如果您需要进一步控制纵横比，您可以始终使用 preserveAspectRatioSpec片段标识符。
为了找到整个图像的 viewBox，直接访问 svg url 并检查页面元素以找到定义在最外层 svg 元素上的 viewBox。
有了这些信息，您现在可以根据自己的需要定制视图框。
小智 11
这些答案(以及多个相似/重复)似乎都没有完全回答这个并提供一个例子.
一步一步:直接在SVG代码中删除"填充"(周围的空白区域)
确定没有填充的svg的"实际"大小.对我来说,这是最简单的方法,使用(Chrome)检查器并将鼠标悬停在检查器中的路径元素上.您将在浏览器中看到实际svg旁边显示的宽度和高度.
- 如果有多个路径元素,我发现最后一个通常是"包含"元素.
现在直接在您选择的文本/代码编辑器中编辑svg代码.您将仅更改svg元素标记中的代码.
- 将width和height属性更改为您在步骤1中确定的"实际"尺寸.
- 更改viewBox属性的4个维度.没有单位,只有数字(即10不是10px).
- 我们将从第3和第4个数字开始,这将再次成为您的"实际"宽度和高度.
- 第一维和第二维是视图框内svg部分"原点"的x和y坐标.这些将分别改变(从可能的0 0)到初始宽度和高度与实际宽度和高度之差的一半.在更简单的(CSS)术语中,您的左边距和上边距.
困惑？简单的逐步示例
这个例子将使它非常简单,并将使用下面的svg作为参考.如果您想了解这个确切的示例,只需将下面的所有代码包装在HTML标记中,<html> svg code </html>然后在浏览器中打开即可.
<svg xmlns="http://www.w3.org/2000/svg" width="48"
height="48" viewBox="0 0 48 48">
<path d="M40 4H8C5.79 4 4.02 5.79 4.02 8L4 44l8-8h28c2.21
0 4-1.79 4-4V8c0-2.21-1.79-4-4-4zM12
18h24v4H12v-4zm16 10H12v-4h16v4zm8-12H12v-4h24v4z"/></svg>
+我们假设您已经能够完成步骤#1并确定没有填充的svg的"实际"尺寸.对于此示例,实际尺寸为40 x 40.更改svg属性以反映此情况.
width="40" height="40"
+我们的初始尺寸为48 x 48,我们的实际尺寸(无填充)为40 x 40.这个差异的一半是4 x 4.相应地更改viewBox属性,并添加我们的实际宽度和高度.
viewBox="4 4 40 40"
+我们的开放svg标签现在应该反映这些变化.
<svg xmlns="http://www.w3.org/2000/svg" width="40"
height="40" viewBox="4 4 40 40">
+如果你的svg周围的填充对于顶部/底部和右/左有不同的量,这不是问题.只需按照上面的标准说明操作,然后使用viewBox属性的前2个值来了解这些值如何沿x和y轴移动图像.
我刚刚在处理同样的问题时学到了所有这些.完全接受任何比我更熟悉操纵可缩放矢量图形的人的建议/编辑
| 归档时间： |
|
| 查看次数： |
34831 次 |
| 最近记录： |