Question

我无法弄清楚如何调用保存在单个svg图像中的图标，首先我想了解坐标是如何工作的，我的意思是如何将大图像中的某个图标调用为html像<img>这样的元素，如果您已经设置了<view>这样的元素，我会在某处找到按名称调用图标的方法：

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

但我不明白如何将它们加载到页面中，只将它们调用到视图元素？当有很多不同的视图时，我如何将它们全部存储起来以便能够在任何地方调用任何图标？

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

Answer 1

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

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

在图像中我有3个视图元素

<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元素视图框中的默认视图

<img src="Cannulation.svg"/>

要显示此SVG文件中的第三个视图，我可以使用以下任一项：

<!-- 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）

修改：删除了指向我的测试网站的链接，因为这些链接只是暂时的

在应用程序的任何位置调用svg视图元素

1 个答案: