Question

以下尝试制作带有图案填充的矩形在Safari 6.1，Firefox 30或Chrome 36中似乎不起作用，即使W3规范seems to say我可以使用{{3 }，包括一个相对的，如fill="url(localURL.svg#MyId)"。

`test.html`

<html>
<head>
    <style>
        .patterned { fill: url("patterns.svg#polkadot");
                     stroke: lime; stroke-width: 5px}
    </style>
</head>

<body>
 <svg width="500" height="500">
     <rect class="patterned" height="27" width="58">
 </svg>
</body>
</html>

`patterns.svg`

<svg xml:space="preserve" width="225" height="110" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <pattern id="polkadot" patternunits="userSpaceOnUse" x="0" y="0" width="20" height="20">
            <circle r="10" cx=12 cy=10 fill="purple">
        </pattern>
    </defs>
</svg>

Safari和Chrome显示黑色填充绿色轮廓的矩形。 Firefox显示一个空的或白色填充的绿色轮廓矩形。它们都没有显示出紫色圆圈的图案。

我正在尝试这种方法，因为我无法在Backbone + JQuery + D3项目中使用SVG填充模式在Safari上使用non-local IRI reference。作为一个简单的测试用例，我无法让这种方法失败 - the most common method, an inline defs with fill="url(#MyId)"，但事实证明这是一个不同的Safari bug，有明显的解决方法。至少这种方法适用于某些浏览器。

Answer 1

您的patterns.svg文件中存在大量语法错误。缺少“字符圆属性值，未闭合的圆元素，patternunits而不是patternUnits。

SVG standalone必须是有效的XML，它不像html那样宽容，它对属性名称也区分大小写。如果您直接加载patterns.svg文件，浏览器会告诉您所有这些事情。

所有这些都修复了（如下所示），这适用于Firefox。我不确定Chrome / Webkit是否已经实现了这一点。

<svg xml:space="preserve" width="225" height="110" xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <pattern id="polkadot" patternUnits="userSpaceOnUse" x="0" y="0" width="20" height="20">
            <circle r="10" cx="12" cy="10" fill="purple"/>
        </pattern>
    </defs>
</svg>

SVG填充模式使用对文件中定义的引用

`test.html`

`patterns.svg`

1 个答案: