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

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

原文由 neversaint 发布，翻译遵循 CC BY-SA 4.0 许可协议

阅读 638

但这是一个 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>

但要裁剪/调整大小，您只需更改

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

原文由 Persijn 发布，翻译遵循 CC BY-SA 4.0 许可协议

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

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

确定没有填充的 svg 的“实际”大小。对我来说，最简单的方法是使用 (Chrome) 检查器并将鼠标悬停在检查器中的路径元素上。您会在浏览器中看到实际 svg 旁边显示的宽度和高度。
- 如果有多个路径元素，我发现最后一个通常是“包含”元素。
现在直接在您选择的文本/代码编辑器中编辑 svg 代码。您将仅更改 svg 元素标签内的代码。
- 将宽度和高度属性更改为您在步骤 #1 中确定的“实际”尺寸。
- 更改 viewBox 属性的 4 个维度。虽然没有单位，只有数字（即 10 而不是 10px）。
  - 我们将从第 3 和第 4 个数字开始，这将再次是您的“实际”宽度和高度。
  - 第一维和第二维是 viewBox 内 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 轴移动图像。

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

原文由 David Rebd 发布，翻译遵循 CC BY-SA 3.0 许可协议

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

庄稼

但这是一个 SVG！

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

使困惑？简单的分步示例

你尚未登录，登录后可以

如何自定义设置虚线边框的样式？

怎么把一个矩形div变成一个直角三角形？

怎么去掉聚焦文字处的光标竖线？

Web 上的室内导航效果是如何实现的呢？

只用一个div，宽高固定，文本内容不固定，能不能实现水平、垂直居中，超出两行显示省略号？

浏览器可以直接解析scss文件了吗？

Flask中static文件夹下的本地图片无法在HTML页面加载怎么办？

Stack Overflow 翻译