为什么我不能引用在外部文件(绘制服务器)中定义的 SVG 线性渐变? [英] Why can't I reference an SVG linear gradient defined in an external file (paint server)?

问题描述

请看一下这支笔:

http://codepen.io/troywarr/pen/VYmbaa

我在这里做的是:

• 定义一个 SVG 符号()
• 定义 SVG 线性渐变 ()
• 使用 元素来引用我创建的 SVG 符号
• 在CSS中，定义两个类:
  • external，它引用了这个外部.svg 文件(右击查看源码)
  • internal，它引用了本地 HTML 中定义的线性渐变(我相信，它实际上与外部文件中的相同)
  • defining an SVG symbol (<symbol>)
  • defining an SVG linear gradient (<linearGradient>)
  • using the <use> element to reference the SVG symbol I've created
  • in the CSS, defining two classes:
    • external, which references the linear gradient defined in this external .svg file (right click and view source)
    • internal, which references the linear gradient defined in the local HTML (which is, I believe, effectively identical to the one in the external file)

    因为我已将 internal 类应用于 HTML 示例底部的 <svg> 元素，所以应用了渐变，呈现蓝色渐变复选标记.这就是我所追求的.

    Because I've applied the internal class to the <svg> element at the bottom of the HTML example, the gradient is applied, rendering a blue gradient checkmark. That's what I'm after.

    但是，如果您将 HTML 示例中的 internal 类切换为 external，则复选标记将不再可见:

    But, if you switch the internal class to external in the HTML example, the checkmark is no longer visible:

    http://codepen.io/troywarr/pen/vEymKX

    当我查看 Chrome Inspector 的网络"选项卡时，我根本看不到浏览器尝试加载 SVG 文件.是我的语法有问题，还是有其他问题?

    When I watch Chrome Inspector's "Network" tab, I don't see the browser trying to load the SVG file at all. Is there a problem with my syntax, or is something else going on here?

    根据我发现的一些参考资料，至少看起来我这样做是正确的:

    It at least looks like I'm doing this right, based on a few references I've found:

    • http://www.w3.org/TR/SVG/painting.html#SpecifyingPaint
    • http://www.w3.org/TR/SVG/linking.html#IRIReference
    • https://stackoverflow.com/a/7118142/167911

    但是，到目前为止，我所尝试的任何方法都不允许我引用外部 .svg 文件中定义的线性渐变.

    But, nothing I've tried so far has allowed me to reference a linear gradient defined in an external .svg file.

    感谢您的帮助！

    推荐答案

    经过进一步研究，这似乎是浏览器支持问题.见:

    After more research, it looks like this is a browser support issue. See:

    • https://code.google.com/p/chromium/问题/详细信息?id=109212
    • https://bugs.webkit.org/show_bug.cgi?id=105904

    遗憾的是，在发布我的问题之前，我遇到了这个问题，并且在 5-1 中确实认为/2 年，浏览器支持会迎头赶上 - 但情况似乎并非如此.

    Sadly, I'd come across this question before posting mine, and had thought that surely, in 5-1/2 years, browser support would have caught up - but that doesn't appear to be the case.

    截至 2015 年，显然 Firefox 和 Opera 是仅有的两种以任何实质性方式支持此功能的浏览器.

    As of 2015, apparently Firefox and Opera are the only two browsers to support this in any substantial way.

    回到绘图板...

    这篇关于为什么我不能引用在外部文件(绘制服务器)中定义的 SVG 线性渐变?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！