7

パターン内でvector-effect="non-scaling-stroke"を使用すると、Firefox または Chrome で期待どおりの結果が得られませんが、Opera は期待どおりに動作します...

例：

<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" height="100px" width="1000px">
<defs>
    <pattern id="ticks" viewBox="0 0 12 4" preserveAspectRatio="none" height="100%" width="10%">
        <path stroke="#000" vector-effect="non-scaling-stroke" d="M 0 0 L 0 4 M 1 0 L 1 1 M 2 0 L 2 1 M 3 0 L 3 2 M 4 0 L 4 1 M 5 0 L 5 1 M 6 0 L 6 3 M 7 0 L 7 1 M 8 0 L 8 1 M 9 0 L 9 2 M 10 0 L 10 1 M 11 0 L 11 1" />
    </pattern>
</defs>
<rect width="100%" height="100%" fill="url(#ticks)" />

Firefox、Chrome、Opera での結果のスクリーンショット

何か間違ったことをしていますか、それとも WebKit と Gecko のバグですか? バグの場合、回避策を知っている人はいますか?

助けてくれてありがとう。

4

1 に答える 1

0

このソリューションをテストするための Opera はありませんが、Chrome と Firefox で望ましい結果が得られているようです。

@galdreは正しいです。定義する必要がありますstroke-width(以下に の値0.1が割り当てられています)。また、締めくくりがありません</svg>：

<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" height="100px" width="1000px">
    <defs>
    <pattern id="ticks" viewBox="0 0 12 4" preserveAspectRatio="none" height="100%" width="10%">
        <path stroke-width="0.1" stroke="#000" vector-effect="non-scaling-stroke" d="M 0 0 L 0 4 M 1 0 L 1 1 M 2 0 L 2 1 M 3 0 L 3 2 M 4 0 L 4 1 M 5 0 L 5 1 M 6 0 L 6 3 M 7 0 L 7 1 M 8 0 L 8 1 M 9 0 L 9 2 M 10 0 L 10 1 M 11 0 L 11 1" />
    </pattern>
    </defs>
    <rect width="100%" height="100%" fill="url(#ticks)" />
</svg>
于 2013-07-24T19:26:29.710 に答える