Firefox使用沿接缝的线条渲染SVG旋转模式

因此，这里的目标是有一个2色对角填充图案，可以动态旋转到任意角度（仅供参考，它将应用于D3地图，并进行缩放）

我在Firefox（1）问题中发现“SVG模式包含重复之间的空格，但是解决方案在旋转方面不是很灵活，我无法使它与2个颜色栏一起工作

.前4个是我的技术不同。最后一个是尝试按照前面提到的答案的建议进行调整

Chrome渲染效果很好（2）（Safari和IE也是如此）

，但仅当图案旋转到非90度增量时

有什么想法吗

以下是JSFIDLE的内容：

<?xml version="1.0" encoding="iso-8859-1" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/SVG/DTD/svg10.dtd">
<svg xml:space="preserve" width="925" height="810" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <pattern id="hatch" width="10" height="10" patternUnits="userSpaceOnUse">
            <line x1="0" y1="0" x2="0" y2="10" style="stroke:black; stroke-width:16" />
            <line x1="13" y1="0" x2="13" y2="10" style="stroke:gray; stroke-width:16" />
        </pattern>
        <pattern id="hatch45" width="10" height="10" patternTransform="rotate(5 0 0)" patternUnits="userSpaceOnUse">
            <line x1="-2" y1="-2" x2="-2" y2="12" style="stroke:black; stroke-width:16" overflow="visible" />
            <line x1="12" y1="-2" x2="12" y2="12" style="stroke:gray; stroke-width:16" overflow="visible" />
        </pattern>
        <pattern id="hatch80" width="10" height="10" patternTransform="rotate(80 0 0)" patternUnits="userSpaceOnUse">
            <line x1="0" y1="0" x2="0" y2="10" style="stroke:black; stroke-width:16" />
            <line x1="13" y1="0" x2="13" y2="10" style="stroke:gray; stroke-width:16" />
        </pattern>
        <pattern id="hatch90" width="10" height="10" patternTransform="rotate(90 0 0)" patternUnits="userSpaceOnUse">
            <line x1="0" y1="0" x2="0" y2="10" style="stroke:black; stroke-width:16" />
            <line x1="13" y1="0" x2="13" y2="10" style="stroke:gray; stroke-width:16" />
        </pattern>
        <pattern x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse" id="line-fill" viewBox="0 0 20 20" overflow="visible" patternTransform="rotate(80 0 0)">
            <g stroke-width="20">
                <line x1="0" y1="-10" x2="0" y2="30" stroke="black" />
                <line x1="20" y1="-10" x2="20" y2="30" stroke="gray" />
            </g>
        </pattern>
    </defs>
    <g>
        <rect style="fill:url(#hatch45);" x="10" y="0" width="200" height="130" />
        <rect style="fill:url(#hatch80);" x="10" y="150" width="200" height="130" />
        <rect style="fill:url(#hatch90);" x="10" y="300" width="200" height="130" />
        <rect style="fill:url(#hatch);" x="10" y="450" width="200" height="130" />
        <rect style="fill:url(#line-fill);" x="10" y="600" width="200" height="130" />
    </g>
</svg>

1:stackoverflow.com/questions/19391071/svg-pattern-contains-whitespace-between-repetitions-in-firefox

---

2:imgur.com/c8SxdGG

你有什么版本/操作系统？你的JSFIDLE在我的Fx 30.0/Win7.Arch和Firefox 30.0的OSX Mavericks上看起来很好。我刚刚在几个Windows虚拟机上试用过，你是对的，这似乎是一个只有unix的问题。我成功地获得了它，但仍然没有运气用patternTransform旋转它。我可以确认同样的错误。归档现在有了Mozilla。