我有以下 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 中裁剪它？
【问题讨论】：
您可以通过使用负边距并固定父元素的大小来裁剪图像：
CSS Display an Image Resized and Cropped
不仅可以直接在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>但是要裁剪/调整大小，您可以简单地更改
viewBox="0 0 100 100"
将显示 0 到 100 单位 x 和 y 内的任何内容
viewBox="-100 -100 100 100"
将显示从 -100 到 100 单位 x 和 y 的任何内容
viewBox="50 50 500 500"
将显示从 50 到 500 个单位 x 和 y 的任何内容
【讨论】：
viewbox 方法处理 SVG 文件？
<img> 元素虽然是最受支持的方法，但会限制您更改 SVG 的能力……长篇大论。尝试一些替代方法，例如添加内联 SVG 作为包装器，并使用 SVG <use> 元素，或者使用 AJAX 加载 SVG 文件并注入网页，从而使您可以完全访问 SVG 以更改 <svg viewBox> 元素.在您的情况下，似乎 viewBox 在生成的 SVG 文件中可能是一致的，这将有所帮助。
这些答案（以及多个相似/重复）似乎都没有完全回答这个问题并提供了一个例子。
确定没有填充的 svg 的“实际”大小。对我来说，这是最容易做到的，方法是使用 (Chrome) 检查器并将鼠标悬停在检查器中的 path 元素上。您将在浏览器中看到实际 svg 旁边显示的宽度和高度。
现在直接在您选择的文本/代码编辑器中编辑 svg 代码。您将只更改 svg 元素标签内的代码。
这个例子将使它变得非常简单，并将直接使用下面的 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 轴移动图像。
我今晚刚刚在处理同样的问题时学到了这一切。完全接受任何比我更了解操纵可缩放矢量图形的人的建议/编辑
【讨论】：
您可以使用fragment identifiers 做您想做的事。片段标识符允许您定义希望在 img 标记中显示的 SVG 片段，并允许控制图像变换和纵横比。
将#svgView(viewBox(0, 0, 32, 32)) 添加到 svg url 的末尾定义了 svg 中要显示的区域。前 2 个参数是 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。
有了这些信息，您现在可以根据需要定制视图框。
【讨论】：
只需使用Inkscape。
我首先建议阅读 David Rebd 关于通过文本编辑器（例如 Notepad++）调整 SVG 图像尺寸的帖子。
然后在 Inkscape 中只需单击该项目，您就可以直接设置尺寸，甚至不必担心精确的鼠标拖动。
如果工具栏丢失，请点击查看菜单，然后显示/隐藏并启用工具控制栏。
【讨论】：
您可以在https://svgcrop.com一键完成此操作
【讨论】：
在inkscape中裁剪任何格式，基于https://designbundles.net/design-school/how-to-crop-an-image-in-inkscape#
用箭头工具选择图像/对象（全部），左键单击;
转到菜单“对象”，“取消组合”（照片不需要此步骤）
“选择矩形工具（或您想要使用的任何形状工具）在您想要裁剪的图像上绘制一个形状。”
使用箭头工具，选择所有对象，因为它们可能未分组拖动 Left click 在所有区域（否则，使用 shift + Left click)
在新形状上方（裁剪区域步骤 2）右键单击并选择“设置剪辑”
在“编辑”菜单中使用“调整页面大小以选择”
【讨论】：
在尝试使用代码修复之前，您可能需要尝试优化您的 SVG 布局。 Inspector 中可见的空白区域暗示了 SVG 未紧密设置在画板上的事实。如果您有可用的 Adobe Illustrator，请在其中打开您的 SVG。您应该会看到类似这样的内容：
白色区域是您的画板，圆圈是您的 SVG。您要做的是确保您的 SVG 与画板的大小相同。此按钮允许您调整画板的大小：
选择那个，选择你的白色方块，让边缘接触你的圆圈并保存你的 SVG。
对您的实际 SVG 文件的另一个潜在修复可能是存在一个可扩展 SVG 图形大小的剪贴蒙版。在这种情况下，您需要尽可能移除这些遮罩。要判断是否存在影响 SVG 的剪贴蒙版，请单击您的圆圈。如果选择时周围的框没有接触到圆圈的边缘，则您有一个剪贴蒙版，它将您的图像边界向外推。
查看您的图像，这可能会非常复杂，如果您不太熟悉矢量编辑，将其传回给设计师可能会更快、更容易。
【讨论】：