我在某些页面上显示 SVG 元素，但在其他页面上没有显示，相同的浏览器、平台等答案

【问题标题】：I have SVG element displaying on some pages but not others, same browser, platform et al我在某些页面上显示 SVG 元素，但在其他页面上没有显示，相同的浏览器、平台等
【发布时间】：2019-04-28 12:17:36
【问题描述】：

下面的代码有一堆svg三角形

<svg class="constellation" viewBox="0 0 275 275">
<use class="constellation__1" xlink:href="#constellation-svg" data-props="190x190,83,38" transform="scale(0.693582)" x="119.66851188213664" y="54.78800219180441"></use>
<use class="constellation__2" xlink:href="#constellation-svg" data-props="107x107,64,67" transform="scale(0.390596)" x="163.851982" y="171.532544"></use>
<use class="constellation__3" xlink:href="#constellation-svg" data-props="53x53,148,200" transform="scale(0.193473)" x="764.96462" y="1033.735676"></use>

此 svg 代码出现在两个不同的页面上。在一个页面上，它显示在另一个页面上，它没有。我没有设置任何一个页面，但我的任务是让 svg 显示在两个页面上。

谁能告诉我为什么他们没有出现在第二个链接中？我对比了css和html，找不到区别。

【问题讨论】：

您没有将问题代码放入问题中，您只提供了指向它的链接。这实际上是不允许的。

标签： image svg vector-graphics

【解决方案1】：

所以我发现 svg “use” 元素需要一个源 svg。它不包含实际的 svg 矢量坐标，因此使用 svg “use”元素需要一个指向 DOM 中实际 svg 元素的指针。例如，“use”元素需要一个属性，例如：xlink:href="#some_id_of_an_actual_svg"，它指向包含实际矢量信息的 svg 元素。 svg id="some_id_of_an_actual_svg"

所以 <svg class="my-svg"> <use xlink:href="#some_id_of_an_actual_svg"></use> </svg>

单独使用时不是 svg，它是一个指向 svg 的指针，它必须在 DOM 中，包含 xlink:href 属性中引用的 id。

<svg id="some_id_of_an_actual_svg" viewBox="0 0 467 467" xmlns="http://www.w3.org/2000/svg"><path stroke-width="0" d="M466.2 455.5V31.2C466.2 14.5 452.7 1 436 1H11.7C5.8 1 1 5.8 1 11.7c0 3 1.2 5.6 3.1 7.6l443.8 443.8c1.9 1.9 4.6 3.1 7.6 3.1 5.9 0 10.7-4.8 10.7-10.7" class="some-class"></path></svg>

单独添加 svg "use" 不会显示任何内容，两个 svg 元素都必须存在。该过程是隐藏源 svg 并使用“use”元素创建它的多个版本并以不同的方式设置它们。或者甚至使用未隐藏的源 svg 来表示您的第一个实例，然后使用“使用”元素来创建它们的更多实例以进行不同的处理。

【讨论】：