SVG使用标记不渲染渐变Firefox [英] The SVG use tag not rendering gradients Firefox

问题描述

在SVG中有一个JavaScript应用程序（类似于CAD），其中有工具（用Inkscape在SVG中构建的对象）使用标签。一切工作正常的Chrome和Safari（从来没有在IE中测试），但在Firefox中，所有对象填充渐​​变没有渲染。如下图所示：

Firefox

Chrome

tools 像这样加载（使用外部文件）

 < use 
 id =SvgjsUse1448
 xmlns：xlink =http://www.w3.org/1999/xlink
 xlink：href =assets / images / neomap / tools / armchair .SVG＃扶手椅> 
< / use> 
  

渐变在单独的 svg 在 html 页面内

  ... 
< / p< linearGradient xmlns =http://www.w3.org/2000/svgid =armchair_SVGID_1_y2 =1911.6gradientUnits =userSpaceOnUsex2 =1201.2gradientTransform =matrix（1.0799475,0,0,1.2039969 ，15.269894,2.997636）y1 =467.91x1 =1201.7> 
  

<并申请这样的

 < svg xmlns：rdf =http://www.w3.org/1999/ 02/22-rdf-syntax-ns＃xmlns =http://www.w3.org/2000/svgxmlns：xlink =http://www.w3.org/1999/xlinkxmlns：dc =http://purl.org/dc/elements/1.1/height =100％width =100％version =1.1> 
< defs> 
< symbol id =armchairviewBox =0 0 72000 54000> 
 
  ... 
< / symbol> 
< / defs> 
< / svg> 
  

这是Firefox的一个错误？如何解决这个问题？

解决方案

这是您所依赖的Chrome / Safari错误。

  url（＃armchair_SVGID_1_）; 
  

实际上是简写

 网址（<此档案>＃armchair_SVGID_1_）; 
  

但armchair.svg文件中没有渐变。

基本URI的定义在在某些媒体类型中，相对引用的基本URI可以是嵌入在内的
内容本身，以便它可以通过解析器轻松获得
。

有一个注意在CSS规范中提到这个我认为是一个更清晰的声明（至少对于CSS来说，是CSS规范）：

对于CSS样式表，基本URI是样式表的基本URI，而不是源文档。

文件armchair.svg定义了一个与任何SVG文档或CSS样式表相同的基本URI，它是用于访问的绝对URL它。

Webkit浏览器得到这个错误。 此问题的CSS样式表案例的这个错误。

使用绝对网址或将渐变放在使用文件中（但不在符号部分中）。

I have a javascript app (CAD like) build in SVG that have tools (objects build in SVG with Inkscape) that are inserted with the use tag. Everything works fine on Chrome and Safari (never tested in IE), but in Firefox, all objects that fill with gradients did not render. Like image below:

Firefox

Chrome

The tools are loaded like this (using external files)

<use 
  id="SvgjsUse1448" 
  xmlns:xlink="http://www.w3.org/1999/xlink" 
  xlink:href="assets/images/neomap/tools/armchair.svg#armchair">
</use>

The gradients are defined in a separate svg inside the html page

...
<linearGradient xmlns="http://www.w3.org/2000/svg" id="armchair_SVGID_1_" y2="1911.6" gradientUnits="userSpaceOnUse" x2="1201.2" gradientTransform="matrix(1.0799475,0,0,1.2039969,15.269894,2.997636)" y1="467.91" x1="1201.7">

and apply like this

<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:dc="http://purl.org/dc/elements/1.1/" height="100%" width="100%" version="1.1" >
  <defs>
    <symbol id="armchair" viewBox="0 0 72000 54000">

       <path style="stroke:#000000;stroke-width:6.84171867;stroke-miterlimit:10;fill:url(#armchair_SVGID_1_);" d="m2234.8,743.7s168.9,1406.4,0,1487.4c-188.77,90.42-1655.6,92.708-1844.3-0.4817-168.8-83.316,0-1488.9,0-1488.9v-182.09h1841l3.2398,184.09z"/>
       ...
    </symbol>
  </defs>
</svg>

It's a bug on Firefox? How can I workaround?

解决方案

That's a Chrome/Safari bug you're relying on.

url(#armchair_SVGID_1_);

is actually shorthand for

url(<this file>#armchair_SVGID_1_);

but there's no gradient in the armchair.svg file.

The definition of what a base URI is is in RFC3986 section 5 which says

Within certain media types, a base URI for relative references can be embedded within the content itself so that it can be readily obtained by a parser.

There's a note in the CSS specification referring to this which I think makes a clearer statement (at least for CSS since this is the CSS specification):

For CSS style sheets, the base URI is that of the style sheet, not that of the source document.

The file armchair.svg defines a base URI the same as any SVG document or CSS stylesheet does, it's the absolute URL used to access it.

Webkit browsers get this wrong. There's this bug for the CSS stylesheets case of this issue.

Use an absolute url or put the gradient in the use file (but not in the symbol part).

这篇关于SVG使用标记不渲染渐变Firefox的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！