css - 使用蒙版时 SVG 图案模糊

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>

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

而在第二种情况下，您必须在图案上应用颜色，这会降低它的可重复使用性，因为您无法更改特定方 block 的背景颜色。

这是一个 jsfiddle用上面的例子。

问题:

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

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

注意事项:

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

  在我的真实场景中，我需要能够像使用 path 元素一样使用 transform。使用 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