Question

所以这里的目标是拥有一个2色对角线阴影图案，可以动态旋转到任意角度（即它适用于带有缩放的D3地图）。

我发现“SVG模式在Firefox（1）问题中包含重复之间的空格，但是解决方案不是非常灵活的旋转方式，我无法使用2种颜色的条形码。”

Here's a jsfiddle test case.。前4个是我的旋转技术不同。最后一个尝试按照前面提到的答案的建议进行调整。

Chrome可以很好地呈现（2）（与Safari和IE一样）。

But Firefox has these nasty lines where it tiles，但仅当模式旋转到90度增量以外的其他值时。

有什么想法吗？

以下是Jsfiddle的内容：

<?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

Firefox使用接缝处的线条渲染SVG旋转图案

0 个答案: