Question

我遇到的问题是，当我在Chrome中进行转换时，我的SVG模式正在消失。我似乎无法找到解决方法。

当我使用transform：scale或Chrome中的旋转

时，会导致图案消失的原因

<svg id="definitions" width="300" height="110" xmlns="http://www.w3.org/2000/svg" version="1.1" style="background:#ddd">
    <defs>
        <pattern id="crosshatch" width="10" height="10" patternUnits="userSpaceOnUse"><rect width="10" height="10" fill="#FFF"></rect><path vector-effect="non-scaling-stroke" d="M-1,1 l2,-2 M0, 10 l10,-10 M9, 11 l2,-2" stroke-opacity="0.2" stroke="#000" stroke-width="1"></path></pattern>
    </defs>
    <path stroke="#900" transform="translate(10, 10)" d="M0,0L66,0L66,84L48,90L18,90L0,84L0,0" class="cement" fill="url(#crosshatch)"></path>
    <path stroke="#900" transform="translate(160, 100) rotate(180)" d="M0,0L66,0L66,84L48,90L18,90L0,84L0,0" class="cement" fill="url(#crosshatch)"></path>
</svg>

我想知道它是否只是Chrome中的一个错误。

Answer 1

这是Chrome中的已知错误。

https://code.google.com/p/chromium/issues/detail?id=447707

看起来它将在Chrome 41中修复。

SVG模式在变换时消失

1 个答案: