Kontur genişliği nasıl ayarlanır: 1 SVG şekillerinin yalnızca belirli taraflarında?

SVG'deki bir <rect>öğede kontur genişliği: 1 ayarlamak , dikdörtgenin her tarafına bir kontur yerleştirir.

Bir SVG dikdörtgeninin yalnızca üç tarafına kontur genişliği nasıl yerleştirilir?

— user782860
kaynak

Yanıtlar:

171

Kontura veya kontursuzluğa ihtiyacınız varsa , bunu yapmak için çizgi ve boşlukları dikdörtgenin kenarlarıyla eşleştirerek çizgi çizgi dizisini de kullanabilirsiniz .

rect { fill: none; stroke: black; }
.top { stroke-dasharray: 0,50,150 }
.left { stroke-dasharray: 150,50 }
.bottom { stroke-dasharray: 100,50 }
.right { stroke-dasharray: 50,50,100 }

<svg height="300">
    <rect x="0.5" y="0.5" width="50" height="50" class="top"/>
    <rect x="0.5" y="60.5" width="50" height="50" class="left"/>
    <rect x="0.5" y="120.5" width="50" height="50" class="bottom"/>
    <rect x="0.5" y="180.5" width="50" height="50" class="right"/>
</svg>

Snippet'i genişlet

Jsfiddle'a bakın .

— Erik Dahlström
kaynak

Konturu nasıl sadece rect elemanının üstünde gösterebiliriz?

— Suresh

Belirli konumlardaki belirli sayıların neden bu etkiyi verdiğini açıklayabilir misiniz?

— JacobIRR

@JacobIRR, 'strok-dasharray' özelliğinin tanımını ifade eder (yanıtta bağlantılıdır). Buradaki fikir, çizgi uzunluklarını dikdörtgenin kenarlarıyla ve çizgi boşluğunu çizgi içermemesi gereken tarafla eşleştirmektir.

— Erik Dahlström

Çözümünüzü yeni güncelledim, bu bağlantıda codepen.io/shaswatatripathy/pen/oNgPpyd

— tripathy

Burada, stroke-dasharrayhangi sınırların gösterilmesi gerektiğini tanımlayan bir nesneyi üreten programlı bir çözüm var . Kodu okumak, nasıl çalıştığını anlamanıza yardımcı olabilir: codepen.io/lazd/pen/WNweNwy?editors=1010

— lazd

SVG'de tek bir şeklin çeşitli parçalarının görsel stilini değiştiremezsiniz (henüz mevcut olmayan Vektör Efektleri modülü yok). Bunun yerine, her vuruş veya değiştirmek istediğiniz diğer görsel stil için ayrı şekiller oluşturmanız gerekecektir.

Özellikle bu durum için, bir <rect>veya <polygon>öğesi kullanmak yerine dikdörtgenin yalnızca üç tarafını kaplayan bir <path>veya oluşturabilirsiniz <polyline>:

<!-- Move to 50,50 then draw a line to 150,50, to 150,150, and then to 50,150 -->
<path d="M50,50 L150,50 150,150 50,150" />
<polyline points="50,50 150,50 150,150 50,150" />

Bunların etkisini burada iş başında görebilirsiniz: http://jsfiddle.net/b5FrF/3/

Üç tarafı vuruşlu kırmızı kare

Daha fazla bilgi için, <polyline>daha güçlü ama daha kafa karıştırıcı <path>şekiller hakkındaki bilgileri okuyun .

— Phrogz
kaynak

Üç konturlu kenar için bir sürekli çizgi kullanabilirsin ve konturu dikdörtgenin üzerine koyamazsın. SVG'nin bir yolun / şeklin farklı kısımlarına farklı vuruşlar uygulamanıza izin verdiğini sanmıyorum, bu nedenle aynı efekti elde etmek için birden çok nesne kullanmanız gerekir.

— Wdebeaum
kaynak