【问题标题】: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"

所以 &lt;svg class="my-svg"&gt; &lt;use xlink:href="#some_id_of_an_actual_svg"&gt;&lt;/use&gt; &lt;/svg&gt;

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

&lt;svg id="some_id_of_an_actual_svg" viewBox="0 0 467 467" xmlns="http://www.w3.org/2000/svg"&gt;&lt;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"&gt;&lt;/path&gt;&lt;/svg&gt;

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

【讨论】:

    猜你喜欢
    • 2020-07-25
    • 2019-02-05
    • 2015-04-09
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-05-07
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多