Question

请看看这支笔：

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

我在这里做的是：

定义SVG符号（<symbol>）
定义SVG线性渐变（<linearGradient>）
使用<use>元素引用我创建的SVG符号
，定义了两个类：
- external，引用this external .svg file中定义的线性渐变（右键单击并查看源代码）
- internal，它引用了本地HTML中定义的线性渐变（我相信，它实际上与外部文件中的相同）

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

但是，如果您在HTML示例中将internal类切换为external，则不再显示复选标记：

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

当我观看Chrome Inspector的“网络”标签时，我看不到浏览器尝试加载SVG文件。我的语法有问题，还是其他的东西在这里？

根据我发现的一些参考资料，它至少看起来就像我正在做的那样：

但是，到目前为止我没有尝试过的任何内容都允许我引用外部.svg文件中定义的线性渐变。

感谢您的帮助！

Answer 1

经过更多研究后，看起来这是一个浏览器支持问题。参见：

可悲的是，在发布我的帖子之前我遇到了this question，并且认为在5-1 / 2年内，浏览器支持肯定会赶上 - 但似乎并非如此

截至2015年，显然Firefox和Opera是唯一支持这种方式的两种浏览器。

回到绘图板......

Answer 2

您可以将svg4everybody与polyfill: true选项一起使用，它会插入所有外部符号而不是use个标记。但它会导致第二次svg加载。

因此，您可以使用ajax请求下载svg，然后将其插入隐藏样式的页面。

<script>var ajax=new XMLHttpRequest;ajax.open("GET","/img/svg-sprite.svg",!0),ajax.send(),ajax.onload=function(a){var b=document.createElement("div");b.classList.add("hidden"),b.innerHTML=ajax.responseText,document.body.insertBefore(b,document.body.childNodes[0])};</script>

在这种情况下：

/img/svg-sprite.svg - 是你的svg路径。

.hidden 班级样式：

.hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}

您的代码可能如下所示：

<svg><use xlink:href="#logo"></use></svg>

为什么我不能引用外部文件（绘图服务器）中定义的SVG线性渐变？

2 个答案: