SVG: Ölçekleme stroklu iç desen çalışmıyor mu?

bir desen içindeki vektör etkisi = "olmayan ölçekleme zamanlı" kullanarak, I, beklendiği gibi Opera çalışıyor olsa ... Firefox veya Chrome'da beklenen sonucu alamadımSVG: Ölçekleme stroklu iç desen çalışmıyor mu?

Örnek:

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)" />

ben yanlış mı yapıyorum yoksa bu WebKit ve Gecko bir hata nedir? Bir hata ise, bir çözümün farkında olan var mı?

Yardımlarınız için teşekkür ederiz.

kaynak

2013-03-23 Ryan Holdren

Eğer inme-genişliğini tanımlamak istediniz: Ayrıca, bir kapanış </svg> kaçırıyorsunuz demektir? – galdre

Ayrıca bkz. Http://stackoverflow.com/questions/10473328/how-to-draw-non-scalable-circle-in-svg-with-javascript/. Kalıplar SVG Tiny 1.2'de bulunmadığından, ölçekleme-inme işleminin orada nasıl çalışması gerektiği belirsizdir ve SVG2'nin de bunu tanımladığını düşünmüyorum. –

Bu çözümü test etmek için Opera'm yok, ancak Chrome ve Firefox'ta istenen sonuca sahip görünüyor.

@galdre haklı. stroke-width tanımlamanız gerekir (0.1 değeri aşağıda atanmıştır).

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

kaynak

2013-07-24 19:26:29 lando

Strok genişliği 1 pikseldir, bu varsayılan değerdir ve bu nedenle gereksizdir. –

Anladım. Eh, yukarıdaki kod, aradığınız şeyi yapmak için görünmüyor ([ekran görüntüsü] (http://i.imgur.com/Wzsw88A.png)). Bu davranışın bir hatanın sonucu olup olmadığından emin değilim. – lando

Oldukça doğru ... Yukarıdaki, başarısızlığı belirgin kılan sadece bir örnektir. Konturu 0,1 olarak değiştirirseniz, başarısızlığı daha az belirgin hale getirirsiniz. 0,1 strok genişliğinde bile, genişliği 3000px (çok kalın çizgiler) veya 300 piksel (çok ince çizgiler) olarak değiştirirseniz konturun yeniden boyutlandırıldığını görebilirsiniz. –

SVG: Ölçekleme stroklu iç desen çalışmıyor mu?

cevap

İlgili konular