相关疑难解决方法(0)

我的SVG文件的defs部分中有一个linearGradient,并用fill ="url(#myGradientName)"引用它.到目前为止,这很有效.

我想我应该能够将我的整个defs部分放在自己的SVG文件中,然后从我所有的SVG图像中引用它.就是这样的:

styles.svg:

<svg xmlns=...>
  <defs>
    <linearGradient id="myGradient" ...>
    </linearGradient>
  </defs>
</svg>

image.svg:

<svg xmlns=...>
  <rect width="100" height="100" fill="styles.svg#myGradient"/>
</svg>

但我似乎无法应用这种风格.我对此文件外部的ID(styles.svg#myGradient)有错误的语法吗？我是否需要先以某种方式明确包含该文件？

我一直在倾注SVG规范,看起来这应该是可能的,但实际上没有一个例子显示它已经完成.

编辑:FOP常见问题解答表明正确的语法是fill ="url(grad.svg#PurpleToWhite)",但这在Gecko或Webkit中不起作用.这是正确的,没有人支持它,或者我做错了什么？

请看看这支笔:

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

我在这里做的是:

• 定义SVG符号(<symbol>)
• 定义SVG线性渐变(<linearGradient>)
• 使用该<use>元素来引用我创建的SVG符号
• 在CSS中,定义两个类:
  • external,它引用在定义的线性梯度这个外部.svg文件(右键点击和查看源)
  • internal,它引用了本地HTML中定义的线性渐变(我相信,它实际上与外部文件中的相同)

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

但是,如果您在HTML示例中切换internal类external,则不再显示复选标记:

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

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

根据我发现的一些参考资料,至少看起来我正在做这件事:

• http://www.w3.org/TR/SVG/painting.html#SpecifyingPaint
• http://www.w3.org/TR/SVG/linking.html#IRIReference
• /sf/answers/498269971/

但是,到目前为止我没有尝试过任何东西,这使我能够引用外部.svg文件中定义的线性渐变.

谢谢你的帮助!

我想要一个SVG图像(预渲染,但在svg标签中插入js,以允许进一步操作)能够使用"pattern"标签使用预定义的模式.听起来很简单,不是吗？好吧,事实证明Chrome(Webkit？)的行为与其他任何浏览器都有所不同,现在我不确定实现这一目标的最佳方法是什么.

我的svg看起来像这样:

<svg>
 <defs>
  <pattern id="specialPattern">...</pattern>
 </defs>
 <path class="special"></path>
</svg>

并且我希望类中的路径special具有"模式"作为填充.

尝试一个:在Chrome中运行,而不是在FF或Opera中运行

我的第一次尝试就是把它放在我的CSS中:

 .special { fill:url("#specialPattern");}

这实际上适用于Chrome,但是当你想到它时,它可能不应该.我尝试的其他浏览器将此url解释为相对于它所在的文件(css文件),这更有意义.

尝试二:适用于FF和Opera,而不是Chrome

下一次尝试:为模式提供绝对URL.

 .special { fill:url("//example.com/styles/svgWithStyleDeclaration.svg#specialPattern");}

虽然这在FF和Opera中可以正常工作,但Chrome现在重置了填充(我不知道它实际上在寻找那种风格)

尝试三:工作,种类

内联SVG中的样式可以在任何地方使用: style="fill:url('#specialPattern')"

虽然我猜这是内容和演示之间的界限模糊的情况,但在我的情况下,至少将样式decclarations保存在其他地方会更好(尤其是因为这会使我的SVG需要更大)

尝试四:工作(？)但很脏

我没有测试过很多浏览器,所以我不确定它是如何防水的,但在我看来,使用css hack来检测webkit浏览器会起作用:

@media screen and (-webkit-min-device-pixel-ratio:0) {
  .special {fill: url("#specialPattern");}
}
 .special { fill:url("//example.com/styles/svgWithStyleDeclaration.svg#specialPattern");}

现在,必须有一种更优雅的方式来解决这个问题.应该怎么做？

编辑:原来IE的行为与Chrome一样,所以你还需要确保IE <= 9有'fill:url(#specialPattern)'