Firefox SVG使用标记不呈现渐变
我有一个javascript应用程序(类似CAD)内置在SVG中,它有Firefox SVG使用标记不呈现渐变,firefox,svg,Firefox,Svg,我有一个javascript应用程序(类似CAD)内置在SVG中,它有工具(使用Inkscape在SVG中构建对象),并插入使用标记。在Chrome和Safari上一切都很好(从未在IE中测试过),但在Firefox中,所有用渐变填充的对象都没有渲染。如下图所示: 火狐 铬 工具是这样加载的(使用外部文件) 然后像这样申请 <svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w
工具(使用Inkscape在SVG中构建对象),并插入使用标记。在Chrome和Safari上一切都很好(从未在IE中测试过),但在Firefox中,所有用渐变填充的对象都没有渲染。如下图所示:
火狐
铬
工具
是这样加载的(使用外部文件)
然后像这样申请
<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>
...
这是Firefox上的一个bug?我该如何解决呢?这是您所依赖的Chrome/Safari bug
url(#armchair_SVGID_1_);
实际上是
url(<this file>#armchair_SVGID_1_);
url(#扶手椅#SVGID#u 1#);
但是armchair.svg文件中没有渐变
基本URI的定义见第5节,其中
在某些媒体类型中,可以使用相对引用的基本URI
嵌入到内容本身中,以便易于获取
通过解析器
我认为有一种说法更清楚地提到了这一点(至少对于CSS来说,因为这是CSS规范):
对于CSS样式表,基本URI是样式表的URI,而不是源文档的URI
文件armchair.svg定义了一个基本URI,与任何svg文档或CSS样式表一样,它是用于访问它的绝对URL
Webkit浏览器会出错。有一个
使用绝对url或将渐变放在使用文件中(但不放在符号部分)。好的,这是一个错误,但也是W3规范的一种解释。在中指定了两种类型的IRIlocal
,和non-local
本地IRI引用,其中IRI引用不包含or,因此仅包含片段标识符
非本地IRI引用,其中IRI引用确实包含
或
,因此表示对当前文档中某个元素的引用
我看到的是,Chrome/Safari在处理规范时更加灵活,允许本地IRI
引用当前文档中不存在的外部文档
关键是,Chrome/Safari不会呈现位于同一外部文件中的外部SVG文件(通过引用加载,在use
标记中加载)的渐变,仅当渐变加载到当前主html/xml文档中时
因此,我为每个SVG工具创建了两个文件,一个用于Firefox,另一个用于其他浏览器。现在又出现了另一个问题,对于transform:scale()
在g
元素或小SVG元素中的低值,渐变消失(透明),我认为这是一个bug。Firefox在SVG
元素中运行正常。对于SVG,嵌套在
元素或
元素中的任何元素都不会直接用CSS呈现,即使是
元素。只有它们的属性是。您正在使用style属性,它是
元素中的CSS
必须直接使用SVGfill
属性,才能使其在
元素中工作。即使您使用的是SVG
元素。它使用CSS样式属性引用SVG
元素中的SVG图形元素,该属性不会根据规范进行渲染,因为CSS显示属性甚至不适用于SVG
元素
这在Firefox中不是一个bug,Firefox遵守该规范,而使用webkit的Chrome和Safari则不遵守该规范,并且现在允许它。但它们很快就会遵循SVG规范
请参见以下参考和规范:
W3C
规范:
“符号”元素从不直接渲染它们的唯一用途是作为可以使用“use”元素引用的内容。“显示”属性不适用于“符号”元素;因此,即使“display”属性设置为none以外的值,“symbol”元素也不会直接呈现,即使“symbol”元素或其任何祖先的“display”属性设置为none,“symbol”元素也可用于引用
MDN Firefox
元素参考:
符号元素用于定义可由元素实例化的图形模板对象。在同一文档中多次使用的图形中使用符号元素增加了结构和语义。结构丰富的文档可以以图形方式呈现,如语音或盲文,从而提高可访问性请注意,符号元素本身不会被渲染。仅呈现符号元素的实例(即元素对符号的引用)
该规范规定
元素中的SVG元素不会直接呈现。在这种情况下,您需要更改
元素或
元素中这些元素的实际属性。因此,只需在
元素中的那些元素上更改SVGfill
属性。这实际上是一个Chrome/Safari bug。
我发现,如果从linearGradient元素的ID中删除所有连字符,问题就会消失。就这么简单。SVG也可以用于组()。
如果这对某人有帮助,我会很高兴…我也遇到了类似的问题,结果证明我的问题是一个真正的边缘案例,所以我在这里发布我的解决方案是为了其他人的利益
我的目标是定义一组图标,以便以后在文档中重用。我已经将图标定义为defs
元素中的嵌套svg文档:
<svg id="icons">
<defs>
<g id="atom-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
<defs>
<linearGradient id="atom-41-a" x1="50%" x2="50%" y1="3.961%" y2="100%">
<stop offset="0%" stop-color="#FDFDFD"/>
<stop offset="100%" stop-color="#CBCBCB"/>
</linearGradient>
<linearGradient id="atom-41-b" x1="50%" x2="50%" y1="3.961%" y2="100%">
<stop offset="0%" stop-color="#B2E198"/>
<stop offset="100%" stop-color="#04A171"/>
</linearGradient>
</defs>
<g fill="none">
<circle cx="128" cy="128" r="127.858" fill="url(#atom-41-a)"/>
<circle cx="127.858" cy="128.142" r="116.907" fill="url(#atom-41-b)"/>
<path fill="#F2F8F6" d="M100.453 110.097a221.783 221.783 0 0 0-3.988 6.382 164.44 164.44 0 0 1-3.684-11.377c3.73-.535 7.695-.957 11.874-1.249a224.886 224.886 0 0 0-4.202 6.244zm103.138 7.475c-4.132-3.967-10.04-7.602-17.558-10.804-14.926-6.356-34.918-10.474-56.295-11.595a234.82 234.82 0 0 0-7.529-.277C138.53 75.415 154.292 65.05 163.472 64.7c1.944-.074 3.576.31 4.854 1.141 4.296 2.792 5.488 11.453 3.189 23.166a4.267 4.267 0 0 0 8.373 1.644c3.953-20.137-1.576-28.497-6.911-31.965-2.785-1.81-6.093-2.655-9.83-2.513-14.12.536-33.904 15.592-51.956 38.803-7.148.247-14.038.864-20.483 1.827a106.106 106.106 0 0 1-1.625-9.522c-1.619-13.344.367-22.816 5.312-25.337.794-.405 1.662-.639 2.654-.713 4.418-.332 10.652 2.637 17.542 8.359a4.267 4.267 0 0 0 5.452-6.565c-8.85-7.35-16.8-10.817-23.633-10.303-2.112.158-4.095.703-5.892 1.62-4.593 2.342-7.732 6.828-9.33 13.331-1.368 5.57-1.562 12.513-.576 20.636.39 3.213.96 6.556 1.695 9.998-5.04 1.062-9.71 2.356-13.897 3.869-18.316 6.616-22.544 15.337-22.866 21.488-.308 5.876 2.7 14.62 18.775 22.91a4.267 4.267 0 0 0 3.911-7.583c-9.247-4.77-14.41-10.193-14.165-14.88.346-6.605 11.417-13.596 30.274-17.535 1.747 6.309 3.99 12.861 6.68 19.505-6.777 12.723-11.722 25.262-14.286 36.416-1.833 7.97-2.369 14.89-1.592 20.567.906 6.63 3.558 11.418 7.881 14.228 2.205 1.433 5.176 2.553 9.079 2.553 5.658 0 13.275-2.357 23.343-9.538a4.267 4.267 0 1 0-4.955-6.948c-9.925 7.08-18.454 9.613-22.816 6.778-4.652-3.023-5.633-12.642-2.624-25.728 1.995-8.678 5.555-18.296 10.383-28.21a220.995 220.995 0 0 0 3.283 6.731c9.717 19.087 21.612 35.694 33.494 46.762 5.984 5.573 11.708 9.497 17.011 11.663 3.218 1.314 6.24 1.971 9.045 1.971 2.596 0 5.008-.563 7.216-1.69 4.43-2.259 7.511-6.52 9.157-12.665 1.41-5.263 1.726-11.827.942-19.512-1.543-15.11-7.253-33.539-16.077-51.891a4.267 4.267 0 0 0-7.69 3.697c8.407 17.485 13.833 34.908 15.278 49.06 1.27 12.447-.78 21.31-5.486 23.71-4.942 2.52-13.756-1.438-23.58-10.588-11.17-10.404-22.43-26.168-31.706-44.388a210.555 210.555 0 0 1-5.851-12.483 210.936 210.936 0 0 1 7.143-11.836 213.301 213.301 0 0 1 7.877-11.333c.7-.01 1.405-.017 2.115-.019 3.664-.012 7.592.09 11.688.305 20.404 1.07 39.368 4.95 53.399 10.925 12.34 5.256 19.534 11.704 19.244 17.25-.246 4.708-5.967 9.575-15.696 13.352a4.267 4.267 0 0 0 3.088 7.955c16.905-6.563 20.821-14.967 21.13-20.861.27-5.151-2.04-10.111-6.865-14.743v.001z"/>
<path fill="#F1F8F3" d="M119.194 129.133c0 5.153 4.174 9.33 9.323 9.33s9.323-4.177 9.323-9.33c0-5.154-4.174-9.331-9.323-9.331s-9.323 4.177-9.323 9.33"/>
</g>
</svg>
</g>
</defs>
</svg>
这导致对linearGradients的url引用停止工作。可能是因为display:none或som,浏览器从DOM树中删除了它们
url(<this file>#armchair_SVGID_1_);
<svg id="icons">
<defs>
<g id="atom-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
<defs>
<linearGradient id="atom-41-a" x1="50%" x2="50%" y1="3.961%" y2="100%">
<stop offset="0%" stop-color="#FDFDFD"/>
<stop offset="100%" stop-color="#CBCBCB"/>
</linearGradient>
<linearGradient id="atom-41-b" x1="50%" x2="50%" y1="3.961%" y2="100%">
<stop offset="0%" stop-color="#B2E198"/>
<stop offset="100%" stop-color="#04A171"/>
</linearGradient>
</defs>
<g fill="none">
<circle cx="128" cy="128" r="127.858" fill="url(#atom-41-a)"/>
<circle cx="127.858" cy="128.142" r="116.907" fill="url(#atom-41-b)"/>
<path fill="#F2F8F6" d="M100.453 110.097a221.783 221.783 0 0 0-3.988 6.382 164.44 164.44 0 0 1-3.684-11.377c3.73-.535 7.695-.957 11.874-1.249a224.886 224.886 0 0 0-4.202 6.244zm103.138 7.475c-4.132-3.967-10.04-7.602-17.558-10.804-14.926-6.356-34.918-10.474-56.295-11.595a234.82 234.82 0 0 0-7.529-.277C138.53 75.415 154.292 65.05 163.472 64.7c1.944-.074 3.576.31 4.854 1.141 4.296 2.792 5.488 11.453 3.189 23.166a4.267 4.267 0 0 0 8.373 1.644c3.953-20.137-1.576-28.497-6.911-31.965-2.785-1.81-6.093-2.655-9.83-2.513-14.12.536-33.904 15.592-51.956 38.803-7.148.247-14.038.864-20.483 1.827a106.106 106.106 0 0 1-1.625-9.522c-1.619-13.344.367-22.816 5.312-25.337.794-.405 1.662-.639 2.654-.713 4.418-.332 10.652 2.637 17.542 8.359a4.267 4.267 0 0 0 5.452-6.565c-8.85-7.35-16.8-10.817-23.633-10.303-2.112.158-4.095.703-5.892 1.62-4.593 2.342-7.732 6.828-9.33 13.331-1.368 5.57-1.562 12.513-.576 20.636.39 3.213.96 6.556 1.695 9.998-5.04 1.062-9.71 2.356-13.897 3.869-18.316 6.616-22.544 15.337-22.866 21.488-.308 5.876 2.7 14.62 18.775 22.91a4.267 4.267 0 0 0 3.911-7.583c-9.247-4.77-14.41-10.193-14.165-14.88.346-6.605 11.417-13.596 30.274-17.535 1.747 6.309 3.99 12.861 6.68 19.505-6.777 12.723-11.722 25.262-14.286 36.416-1.833 7.97-2.369 14.89-1.592 20.567.906 6.63 3.558 11.418 7.881 14.228 2.205 1.433 5.176 2.553 9.079 2.553 5.658 0 13.275-2.357 23.343-9.538a4.267 4.267 0 1 0-4.955-6.948c-9.925 7.08-18.454 9.613-22.816 6.778-4.652-3.023-5.633-12.642-2.624-25.728 1.995-8.678 5.555-18.296 10.383-28.21a220.995 220.995 0 0 0 3.283 6.731c9.717 19.087 21.612 35.694 33.494 46.762 5.984 5.573 11.708 9.497 17.011 11.663 3.218 1.314 6.24 1.971 9.045 1.971 2.596 0 5.008-.563 7.216-1.69 4.43-2.259 7.511-6.52 9.157-12.665 1.41-5.263 1.726-11.827.942-19.512-1.543-15.11-7.253-33.539-16.077-51.891a4.267 4.267 0 0 0-7.69 3.697c8.407 17.485 13.833 34.908 15.278 49.06 1.27 12.447-.78 21.31-5.486 23.71-4.942 2.52-13.756-1.438-23.58-10.588-11.17-10.404-22.43-26.168-31.706-44.388a210.555 210.555 0 0 1-5.851-12.483 210.936 210.936 0 0 1 7.143-11.836 213.301 213.301 0 0 1 7.877-11.333c.7-.01 1.405-.017 2.115-.019 3.664-.012 7.592.09 11.688.305 20.404 1.07 39.368 4.95 53.399 10.925 12.34 5.256 19.534 11.704 19.244 17.25-.246 4.708-5.967 9.575-15.696 13.352a4.267 4.267 0 0 0 3.088 7.955c16.905-6.563 20.821-14.967 21.13-20.861.27-5.151-2.04-10.111-6.865-14.743v.001z"/>
<path fill="#F1F8F3" d="M119.194 129.133c0 5.153 4.174 9.33 9.323 9.33s9.323-4.177 9.323-9.33c0-5.154-4.174-9.331-9.323-9.331s-9.323 4.177-9.323 9.33"/>
</g>
</svg>
</g>
</defs>
</svg>
<li title="Atom">
<svg><use xlink:href="#atom-icon"/></svg>
</li>
#icons {
display: none;
}
#icons {
height: 0;
}