SVG'de sabit çizgi genişliği

104

Bir SVG öğesindeki kontur genişliğini "piksel duyarlı" olacak şekilde, yani uygulanan mevcut ölçeklendirme dönüşümlerinden bağımsız olarak her zaman 1 piksel genişliğinde ayarlayabilmek istiyorum. SVG'nin tüm amacı pikselden bağımsız olmak olduğu için bunun imkansız olabileceğinin farkındayım.

Bağlam aşağıdaki gibidir:

ViewBox ve preserveAspectRatio öznitelikleri ayarlanmış bir SVG öğem var. Bunun gibi bir şeye benziyor

<svg version="1.1" baseProfile="full"
    viewBox="-100 -100 200 200" preserveAspectRatio="xMidYMid meet"
    xmlns="http://www.w3.org/2000/svg" >
</svg>

Bu, o öğeyi ölçeklendirdiğimde, içindeki gerçek şekillerin buna göre ölçeklendiği anlamına geliyor (şimdiye kadar çok iyi).

Gördüğünüz gibi, viewBox'ı başlangıç noktası merkezde olacak şekilde ayarladım. Bu elemanın içine bir x ve bir y ekseni çizmek istiyorum, bunu şöyle yapıyorum:

<line x1="-1000" x2="1000" y1="0" y2="0" />

Yine, bu iyi çalışıyor. İdeal olarak, bu eksen her zaman sadece 1 piksel genişliğinde olacaktır. Ana svg öğesini ölçeklendirdiğimde eksenlerin şişmanlamasıyla hiç ilgilenmiyorum.

Yani mahvoldum mu?

svg visualization

— wxs
kaynak

129

Dokümanlara bakın olarak vector-effectayarlanmış özelliği kullanabilirsiniz . Başka bir yol kullanmaktır .non-scaling-stroketransform(ref)

Bu, SVG Tiny 1.2'deki parçaları destekleyen tarayıcılarda, örneğin Opera 10'da çalışacaktır. Geri dönüş, aynı şeyi yapmak için küçük bir komut dosyası yazmayı, temelde CTM'yi ters çevirmeyi ve ölçeklenmemesi gereken öğelere uygulamayı içerir.

Daha keskin çizgiler istiyorsanız, kenar yumuşatmayı ( shape-rendering=optimizeSpeedveya shape-rendering=crispEdges) devre dışı bırakabilir ve / veya konumlandırmayla oynayabilirsiniz.

— Erik Dahlström
kaynak

Ne yazık ki bu bir XUL uygulamasında ve henüz vektör efektini desteklemiyor gibi görünüyor. Oh iyi.

— wxs

Bu, Firefox 15'te her şey yolunda görünmeli, bu yüzden XUL uygulamanızı gecko 15'te oluşturduğunuzda onu kullanabilmelisiniz.

— Robert Longson,

IE11 hala vector-effectözelliği desteklemiyor . vector-effect: non-scaling-strokeIE11'deki ile aynı etkiyi elde etmek mümkün mü?

— merlin

@merlin evet, js ile bunu IE'de taklit etmek mümkündür.

— Erik Dahlström

@merlin elemanı klonlayın ( filliçin noneve tersi için stroke), uygun dönüşümleri hesaplayın ve ayarlayın (biri dolgu kısmı ve diğeri kontur kısmı için). Kesinlikle biraz dağınık olacak, ancak işte orada - Microsoft'tan bunun için destek eklemesini de isteyebilirsiniz. Her halükarda, sorunuzun kendi başına bir soru olmayı hak ettiğini düşünüyorum.

— Erik Dahlström