SVG：非スケーリングストローク内部パターンが機能しない？

Question

パターン内ベクトル効果=「非スケーリングストローク」を使用して、私は、期待通りにOperaが働くのに... FirefoxやChromeで期待された結果を得ることはありません

例：

Screenshot of results in Firefox, Chrome and 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)" /> 

は私が何か間違ったことをやっている、またはこれはWebKitのとGeckoのバグですか？それがバグであれば誰でも回避策を認識していますか？

ありがとうございました。

Answer 1

私はこの解決策をテストするために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>