如何在 HTML/CSS 中裁剪 SVG 文件

Posted 2023-03-05

技术标签:

【中文标题】如何在 HTML/CSS 中裁剪 SVG 文件【英文标题】：How to crop SVG file within HTML/CSS 【发布时间】：2016-10-01 23:41:13 【问题描述】：

我有以下 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 中裁剪它？

【问题讨论】：

你能添加一个链接到一个工作示例吗？高度=3500;宽度=3500；似乎是无效标记我相信已被弃用。我建议不要使用它。 【参考方案1】：

裁剪

您可以通过使用负边距并固定父元素的大小来裁剪图像：

CSS Display an Image Resized and Cropped

但这是一个 SVG！

不仅可以直接在html中显示svg：

<svg viewBox="0 0 100 100"  >
  <rect x="10" y="10" rx="5"   fill="pink" stroke="green" stroke-/>
</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 的任何内容

【讨论】：

我如何在 html 中使用您的 viewbox 方法处理 SVG 文件？只需在文本编辑器中打开 svg 文件复制并将其从结尾的文件末尾它只是改变了你需要改变那个 viewBox @neversaint 我需要以编程方式进行。因为，这些数字是在 Web 应用程序中生成的。使用 <img> 元素虽然是最受支持的方法，但会限制您更改 SVG 的能力……长篇大论。尝试一些替代方法，例如添加内联 SVG 作为包装器，并使用 SVG <use> 元素，或者使用 AJAX 加载 SVG 文件并注入网页，从而使您可以完全访问 SVG 以更改 <svg viewBox> 元素.在您的情况下，似乎 viewBox 在生成的 SVG 文件中可能是一致的，这将有所帮助。同意neversaint。如果您可以编辑 svg，则此解决方案很好。但是，如果您只需要使用现有的 svg 文件而不修改它怎么办？例如，正如 neversaint 所建议的那样，OP 似乎问，如果 svg 文件是以编程方式生成的，【参考方案2】：

这些答案（以及多个相似/重复）似乎都没有完全回答这个问题并提供了一个例子。

一步一步：直接在 SVG 代码中删除“填充”（周围的空白）

确定没有填充的 svg 的“实际”大小。对我来说，这是最容易做到的，方法是使用 (Chrome) 检查器并将鼠标悬停在检查器中的 path 元素上。您将在浏览器中看到实际 svg 旁边显示的宽度和高度。

现在直接在您选择的文本/代码编辑器中编辑 svg 代码。您将只更改 svg 元素标签内的代码。

一半

困惑？简单的分步示例

这个例子将使它变得非常简单，并将直接使用下面的 svg 作为参考。如果您想了解这个确切的示例，只需将以下所有代码包装在 HTML 标记 <html> svg code </html> 中，然后在浏览器中打开即可。

    <svg xmlns="http://www.w3.org/2000/svg"  
     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 属性以反映这一点。

+ 我们的初始尺寸是 48 x 48，而我们的实际尺寸（无填充）是 40 x 40。这个差异的一半是 4 x 4。相应地更改 viewBox 属性，并添加我们的实际宽度和高度。

    viewBox="4 4 40 40"

+ 我们开始的 svg 标签现在应该反映这些变化。

    <svg xmlns="http://www.w3.org/2000/svg"  
     viewBox="4 4 40 40">

+ 如果您的 svg 周围的填充在顶部/底部和右侧/左侧有不同的数量，这不是问题。只需按照上面的标准说明进行操作，然后使用 viewBox 属性的前 2 个值来了解这些值如何沿 x 和 y 轴移动图像。

我今晚刚刚在处理同样的问题时学到了这一切。完全接受任何比我更了解操纵可缩放矢量图形的人的建议/编辑

【讨论】：

这是确定 svg 裁剪值的好方法！但是如果你有很多，这将是大量的劳动。【参考方案3】：

您可以使用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))"   />

确保 viewbox 的纵横比与 img 标签的纵横比匹配很重要，否则您的 viewbox 将无法正确调整大小/对齐。如果您需要进一步控制纵横比，您始终可以使用preserveAspectRatiospec 片段标识符。

为了找到整个图像的viewBox，直接访问svg url并检查页面元素以找到定义在最外层svg元素上的viewBox。

有了这些信息，您现在可以根据需要定制视图框。

CodePen Example Here

【讨论】：

这太完美了！我以前从未听说过片段标识符，但显然它们具有良好的浏览器支持。我能够使用这种技术来裁剪 SVG，而无需编辑原始文件。【参考方案4】：

只需使用Inkscape。

我首先建议阅读 David Rebd 关于通过文本编辑器（例如 Notepad++）调整 SVG 图像尺寸的帖子。

然后在 Inkscape 中只需单击该项目，您就可以直接设置尺寸，甚至不必担心精确的鼠标拖动。

如果工具栏丢失，请点击查看菜单，然后显示/隐藏并启用工具控制栏。

【讨论】：

由 dawg 编辑：如果您希望 SVG 容器与其内容具有相同的尺寸，请按照上述步骤操作，然后单击“文件”->“文档属性”并输入相同的尺寸正如您在上面使用的那样。通过修改X、Y、W、H，它就像调整图像大小，而不是裁剪。 @WasitShafi 这允许您将 OUT 移动或调整到有效裁剪的图像边界。【参考方案5】：

您可以在https://svgcrop.com一键完成此操作

【讨论】：

【参考方案6】：

在inkscape中裁剪任何格式，基于https://designbundles.net/design-school/how-to-crop-an-image-in-inkscape#

用箭头工具选择图像/对象（全部），左键单击;

转到菜单“对象”，“取消组合”（照片不需要此步骤）

“选择矩形工具（或您想要使用的任何形状工具）在您想要裁剪的图像上绘制一个形状。”

使用箭头工具，选择所有对象，因为它们可能未分组拖动 Left click 在所有区域（否则，使用 shift + Left click)

在新形状上方（裁剪区域步骤 2）右键单击并选择“设置剪辑”

在“编辑”菜单中使用“调整页面大小以选择”

【讨论】：

【参考方案7】：