javascript - 在应用程序中的任何位置调用 svg View 元素

Question

我无法弄清楚如何调用保存在单个 svg 图像中的图标，首先我想了解坐标是如何工作的，我的意思是如何将大图像中的某个图标调用到 html 元素，例如<img> ，我在某处读到，如果您已经设置了<view>，则可以通过名称调用图标。像这样的元素:

<view id="icon-heart-view" viewBox="0 32 32 32" />
<img src="icons.svg#icon-heart-view" alt="Heart">

但我不明白它们是如何加载到页面上以仅将它们调用到 View 元素的？另外，当有许多不同的 View 时，我如何存储它们以便能够在任何地方调用任何图标？

我正在 MEAN Stack 下构建我的应用程序，如果有人知道这方面的技巧，请分享。

Answer 1

我认为此页面会回答您的很多问题: https://css-tricks.com/svg-fragment-identifiers-work/

图像作为任何图像加载，但在显示时它将使用 SVG 文件内的命名 View 或链接中的 viewBox。

在图像中我有 3 个 View 元素

<svg
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    width="252" height="68"
    viewBox="0 0 126 34"
    id="Cannulation"
    version="1.1">

    <view id="buttonhole" viewBox="0 0 126 34" />
    <view id="ropeladder" viewBox="0 35 126 34" />
    <view id="area" viewBox="0 70 126 34" />
<!-- Image contents here -->
</svg>

不带任何参数显示图像，将显示 SVG 元素的 viewBox 中的默认 View

<img src="Cannulation.svg"/>

要显示此 SVG 文件中的第三个 View ，我可以使用以下任一 View :

<!-- View named "area" in svg-file -->
<img src="Cannulation.svg#area"/>
<!-- View created in html, no view necessary in svg-file -->
<img src="Cannulation.svg#svgView(viewBox(0,70,126,34))"/>

CSS 中相同的三个示例:

body { background: url("Cannulation.svg") }
body { background: url("Cannulation.svg#area") }
body { background: url("Cannulation.svg#svgView(viewBox(0,70,126,34))") }

viewBox 的值为:

viewBox( start_x, start_y, width, height )

左上角为(0,0)

编辑:删除了指向我的测试网站的链接，因为这些链接只是临时的