SVG：模式中的非縮放筆畫不起作用？

當使用圖形內矢量效果=「不結垢中風」，我沒有得到在Firefox或Chrome預期的結果，雖然歌劇作品如預期...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="#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)" />

Screenshot of results in Firefox, Chrome and Opera

我做得不對，或者這是在WebKit和壁虎的錯誤嗎？如果這是一個錯誤，是否有人知道解決方法？

感謝您的任何幫助。

來源

2013-03-23 Ryan Holdren

您是否定義了筆畫寬度？ – galdre 2013-06-23 04:33:28

另請參閱http://stackoverflow.com/questions/10473328/how-to-draw-non-scalable-circle-in-svg-with-javascript/。由於模式不在SVG Tiny 1.2中，所以不確定非縮放筆畫應該如何工作，我不認爲SVG2已經定義了這一點。 – 2013-08-23 11:31:36

我沒有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-24 19:26:29 lando

筆畫寬度應該是1px，這是默認值，因此是多餘的。 – 2013-07-24 22:53:20

我明白了。那麼，上面的代碼似乎做你正在尋找（[截圖]（http://i.imgur.com/Wzsw88A.png））。我不確定這種行爲是否是錯誤的結果。 – lando 2013-07-25 19:41:51

非常真實......以上只是一個讓失敗變得明顯的例子。如果您將筆畫更改爲0.1，那麼您只是使失敗不那麼明顯。即使使用0.1的筆畫寬度，如果將寬度更改爲3000px（線條太粗）或300px（線條太細），仍然可以看到筆觸正在調整大小。 – 2013-07-25 22:49:44

SVG：模式中的非縮放筆畫不起作用？

回答

相關問題