如何在 HTML/CSS 中裁剪 SVG 文件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37588405/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to crop SVG file within HTML/CSS
提问by neversaint
I have the following HTML file (mypage.html). A SVG fileis attached as image into it.
我有以下 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>
The page it generates looks like this:
它生成的页面如下所示：
Notice there are a large white space around the circle. How can I crop that within html or CSS?
请注意，圆圈周围有一个很大的空白区域。如何在 html 或 CSS 中裁剪它？
回答by Persijn
Crop
庄稼
You can crop the image by using negative margins and fixing the size of the parent element:
您可以通过使用负边距和固定父元素的大小来裁剪图像：
CSS Display an Image Resized and Cropped
BUT THIS IS AN SVG!
但这是一个 SVG！
Not only can you display an svg directly in html:
您不仅可以直接在 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>but to crop/resize you can simply alter the viewBox attribute on the <svg> tag:
但是要裁剪/调整大小，您可以简单地更改 <svg> 标签上的 viewBox 属性：
viewBox="0 0 100 100"
will display anything within 0 and 100 unit x & y
将显示 0 和 100 单位 x & y 内的任何内容
viewBox="-100 -100 100 100"
Will display anything from -100 to 100 units x & y
将显示从 -100 到 100 单位 x & y 的任何内容
viewBox="50 50 500 500"
Will display anything from 50 to 500 units x & y
将显示从 50 到 500 个单位 x & y 的任何内容
回答by David Rebd
None of these answers (and multiple similar/duplicates) seemed to completely answer this and provide an example.
这些答案（以及多个类似/重复）似乎都没有完全回答这个问题并提供一个例子。
Step by Step: Remove "padding" (surrounding white space) directly within SVG code
一步一步：直接在 SVG 代码中删除“填充”（周围的空白）
Determine the "actual" size of your svg without padding. For me, this was easiest to do by using the (Chrome) inspector and hovering over the pathelement within the inspector. You'll see the width and height displayed next to the actual svg in your browser.
- If there are multiple path elements, I've found the last one is often the "containing" element.
Now edit the svg code directly in your text / code editor of choice. You'll be changing the code within the svg element tag only.
- Change the width and height attributes to the "actual" dimensions you determined in step #1.
- Change the 4 dimensions of the viewBox attribute. No units though, just the numbers (ie. 10 not 10px).
- We'll start with the 3rd and 4th numbers, which will again be your "actual" width and height.
- The 1st and 2nd dimensions are the x and y coordinates for the "origin" of the portion of the svg that is within the viewBox. These will respectively be changed (from what was likely 0 0) to: halfof the difference between the initial width and height and the actual width and height. In simpler (CSS) terms, your left margin and your top margin.
确定没有填充的 svg 的“实际”大小。对我来说，这是最容易做到的，方法是使用（Chrome）检查器并将鼠标悬停在检查器中的路径元素上。您将在浏览器中的实际 svg 旁边看到显示的宽度和高度。
- 如果有多个路径元素，我发现最后一个通常是“包含”元素。
现在直接在您选择的文本/代码编辑器中编辑 svg 代码。您将仅更改 svg 元素标签内的代码。
- 将宽度和高度属性更改为您在步骤 1 中确定的“实际”尺寸。
- 更改 viewBox 属性的 4 个维度。没有单位，只有数字（即 10 不是 10px）。
- 我们将从第 3 个和第 4 个数字开始，它们将再次成为您的“实际”宽度和高度。
- 第一个和第二个维度是视图框内 svg 部分“原点”的 x 和 y 坐标。这些将分别更改（从可能的 0 0）到：初始宽度和高度与实际宽度和高度之间差异的一半。用更简单的 (CSS) 术语来说，就是左边距和上边距。
Confused? Simple Step by Step Example
使困惑？简单的分步示例
This example will make it extremely simple, and will use the svg directly below as reference. If you'd like to walk through this exact example, just wrap all of the code below in HTML tags <html> svg code </html>and open in your browser.
这个例子将使它变得非常简单，并将直接使用下面的 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>
+ We'll assume you've been able to complete step #1 and determine the "actual" dimensions of your svg without padding. For this example, the actual dimensions are 40 x 40. Change the svg attributes to reflect this.
+ 我们假设您已经能够完成第 1 步并确定没有填充的 svg 的“实际”尺寸。对于此示例，实际尺寸为 40 x 40。更改 svg 属性以反映这一点。
width="40" height="40"
+ Our initial dimensions were 48 x 48 and our actual dimensions (sans padding) are 40 x 40. Half of this difference is 4 x 4. Change the viewBox attribute accordingly, and add our actual width and height.
+ 我们的初始尺寸是 48 x 48，我们的实际尺寸（无填充）是 40 x 40。这个差异的一半是 4 x 4。相应地更改 viewBox 属性，并添加我们的实际宽度和高度。
viewBox="4 4 40 40"
+ Our opening svg tag should now reflect these changes.
+ 我们的 svg 标签现在应该反映这些变化。
<svg xmlns="http://www.w3.org/2000/svg" width="40"
height="40" viewBox="4 4 40 40">
+ If the padding around your svg has different amounts for the top / bottom and right / left, this is not a problem. Simply follow the standard instructions above, then play around with the first 2 values of the viewBox property to gain an understanding of how those values shift the image along the x and y axes.
+ 如果 svg 周围的填充在顶部/底部和右侧/左侧有不同的数量，这不是问题。只需按照上面的标准说明进行操作，然后使用 viewBox 属性的前 2 个值来了解这些值如何沿 x 和 y 轴移动图像。
I just learned all this tonight while dealing with the same issue. Entirely open to suggestions / edits from anyone more knowledgeable on manipulating scalable vector graphics than I
我今晚刚刚在处理同样的问题时学到了这一切。完全接受任何比我更了解操作可缩放矢量图形的人的建议/编辑
回答by PiersyP
You can do exactly what you want with fragment identifiers. Fragment identifiers allow you to define the segment of an SVG that you wish to display in an img tag as well as allowing for control of image transforms and aspect ratio.
你可以用片段标识符做你想做的事。片段标识符允许您定义希望在 img 标签中显示的 SVG 片段，并允许控制图像转换和纵横比。
Adding #svgView(viewBox(0, 0, 32, 32))to the end of your svg url defines the area in the svg that you want to display. The first 2 parameters are the x and y
coordinates of the top left corner of your viewbox and the second 2 parameters are the width and height of your viewbox.
添加#svgView(viewBox(0, 0, 32, 32))到 svg url 的末尾定义了 svg 中要显示的区域。前两个参数是视图框左上角的 x 和 y 坐标，后两个参数是视图框的宽度和高度。
Using this technique your img tags will look something like this:
使用此技术，您的 img 标签将如下所示：
<img src="circos-table-image-medium.svg#svgView(viewBox(0, 0, 32, 32))" height=3500; width=3500; />
It's important to ensure that the aspect ratio of the viewbox matches the aspect ratio of the img tag, if not your viewbox will not be correctly sized/aligned. If you need further control of aspect ratio you can always use the preserveAspectRatioSpecfragment identifier.
确保 viewbox 的纵横比与 img 标签的纵横比匹配很重要，否则您的 viewbox 将无法正确调整大小/对齐。如果您需要进一步控制纵横比，您可以始终使用 preserveAspectRatioSpec片段标识符。
In order to find the viewBox for the entire image visit the svg url directly and inspect the page elements to find the viewBox defined on the outermost svg element.
为了找到整个图像的 viewBox，直接访问 svg url 并检查页面元素以找到在最外层 svg 元素上定义的 viewBox。
Armed with that information you can now tailor your viewbox to your needs.
有了这些信息，您现在可以根据自己的需要定制视图框。
回答by John
Just use Inkscape.
只需使用Inkscape。
I do first recommend reading David Rebd's post about adjusting the dimensions of the SVG image via a text editor (such as Notepad++).
我首先建议阅读 David Rebd 关于通过文本编辑器（例如 Notepad++）调整 SVG 图像尺寸的文章。
Then in Inkscape simply click on the item and you can literally just set the dimensions without even having to worry about precision mouse dragging.
然后在 Inkscape 中只需单击该项目，您就可以直接设置尺寸，甚至不必担心精确的鼠标拖动。
If the toolbar is missing click on the Viewmenu, then Show/Hideand enable the Tools Control Bar.
如果缺少工具栏，请单击“视图”菜单，然后单击“显示/隐藏”并启用“工具控制栏”。
回答by Ferroao
To crop in inkscape, follow steps 4, 11 and 12 in https://designbundles.net/design-school/how-to-crop-an-image-in-inkscape#
要在inkscape中裁剪，请按照https://designbundles.net/design-school/how-to-crop-an-image-in-inkscape#中的步骤4、11和12进行操作
After that, in menu "Edit" use "Resize page to selection"
之后，在菜单“编辑”中使用“调整页面大小以选择”
回答by elmarko
Before attempting to fix with code, you may want to attempt to optimise your SVGs layout. The white space visible in Inspector alludes to the fact that the SVG isn't tightly set to the artboard. If you have Adobe Illustrator available open your SVG in that. You should see something similar to this:
在尝试使用代码修复之前，您可能想要尝试优化您的 SVG 布局。Inspector 中可见的空白暗示了 SVG 没有紧密设置到画板的事实。如果您有可用的 Adobe Illustrator，请在其中打开您的 SVG。您应该会看到类似的内容：
The white area is your artboard, the circle your SVG. What you want to do is ensure your SVG is the same size as the artboard. This button allows you to resize your artboard:
白色区域是您的画板，圆圈是您的 SVG。您要做的是确保您的 SVG 与画板的大小相同。此按钮允许您调整画板的大小：
Select that, select your white square, bring the edges to touch your circle and save your SVG.
选择那个，选择你的白色方块，让边缘接触你的圆圈并保存你的 SVG。
The other potential fix to your actual SVG file may be that there is a clipping mask that extends the size of the SVG graphic. In which case you'll need to remove these masks where possible. To tell if there is a clipping mask affecting your SVG click your circle. If the surrounding box doesn't touch the edges of your circle when selected you have a clipping mask which is pushing your image boundaries out.
对实际 SVG 文件的另一个潜在修复可能是有一个剪切蒙版可以扩展 SVG 图形的大小。在这种情况下，您需要尽可能去除这些面具。要判断是否有影响您的 SVG 的剪贴蒙版，请单击您的圆圈。如果周围的框在选择时没有接触到圆的边缘，则您有一个剪切蒙版，它将您的图像边界向外推。
Looking at your image, this could potentially be quite complicated and if you aren't too familiar with vector editing it might be faster and easier to pass it back to a designer.
查看您的图像，这可能非常复杂，如果您不太熟悉矢量编辑，则将其传回给设计师可能会更快、更容易。
