Question

以下代码中有一堆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进行了比较，但找不到区别。

Answer 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中，该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（不隐藏表示您的第一个实例），然后使用“ use”元素创建它们的更多实例以进行不同的处理。

我在某些页面上显示了SVG元素，但在其他页面上却没有显示，同一浏览器，平台等

1 个答案: