Question

Chrome不会像Firefox或IE 10那样呈现以下svg示例：

<svg style="width: 500px; height:500px">
    <defs>
        <pattern id="pattern-stripe" width="4" height="4" 
         patternUnits="userSpaceOnUse" patternTransform="rotate(45)">
            <rect width="2" height="4" fill="white"></rect>
        </pattern>

        <pattern id="pattern-stripe2" width="4" height="4"
         patternUnits="userSpaceOnUse" patternTransform="rotate(45)">
            <rect width="2" height="4" fill="green"></rect>
        </pattern>
        <mask id="mask-stripe">
            <rect x="0" y="0" width="100" height="100" 
                  fill="url(#pattern-stripe)"></rect>
        </mask>      
    </defs>
    <!-- When there is no scale, you can't see the problem. -->
    <g transform="scale(4,4)">
        <!-- First square:
             Use mask, fill attribute is specified on the element.
         -->
        <rect style="mask: url('#mask-stripe'); fill: green;"
              x="0" y="0" width="50" height="50"></rect>
        <!-- Second square:
             Use the second pattern. The fill color value need to be set on
             the pattern. You can't reuse the hatch pattern with different color
         -->
        <rect style="fill: url(#pattern-stripe2);" 
              x="51" y="0" width="50" height="50" ></rect>
    </g> 
</svg>

第一个正方形在Chrome中是模糊的，同时在Firefox或IE 10中正确渲染。第一个正方形的一个很酷的事情是图案颜色可以直接在rect元素上使用css控制面具。因此，如果我有很多正方形，我可以重复使用该图案并为每个图案应用不同的颜色。

在第二种情况下，您必须在图案上应用颜色，这样可以减少可重复使用的颜色，因为您无法更改特定正方形的背景颜色。

这里的jsfiddle是上面的例子。

问题：

有什么办法可以解决Chrome中的问题吗？

或者也许是另一个仍然在元素上使用CSS样式来控制“填充”的解决方案。属性？

备注：

我无法从transform元素中删除g属性。它在这里发挥作用：如果您删除变换中的比例，您可以使用浏览器进行缩放，并且您永远不会看到任何模糊。

在我的实际情况中，我需要能够使用transform，因为我使用path元素。使用javascript手动缩放值会太慢。
我部分解决了我的解决方案（如果它可以帮助其他人）：

如果您具有变换的最大比例值，则可以使用该最大值缩放所有数据，然后应用当前比例的倒数。那不是
```
<g transform="scale(currentscale, currentscale)"> (conceptually)
```
你这样做：
```
<g transform="scale(1/currentscale, 1/currentscale)">
```

Answer 1

或许以下解决方案可满足您的需求？

首先，使用另一个<g>围绕您的对象并将遮罩应用于该对象。

<g mask="url(#mask-stripe)">
    <g transform="scale(4,4)">

        <rect style="fill: rgb(0, 128, 0);" x="0" y="0" width="50" height="50"/>

    </g>
</g>

然后为您的patternTransform添加比例：

<pattern id="pattern-stripe" width="4" height="4" patternUnits="userSpaceOnUse"
         patternTransform="scale(4,4) rotate(45)">
    <rect width="2" height="4" transform="translate(0,0)" fill="white"></rect>
</pattern>

Demo fiddle here

使用掩码时SVG模式模糊

1 个答案: