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

Question

Strok genişliğini ayarlama: 1 SVG'de <rect> öğesinde, dikdörtgenin her tarafına bir kontur yerleştirir.

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

Answer 1

Tek bir şeklin çeşitli bölümlerinin görsel stilini SVG'de değiştiremezsiniz (yok olan Vector Effects modülü). Bunun yerine, değiştirmek istediğiniz her kontur veya diğer görsel stil için ayrı şekiller oluşturmanız gerekir.

Özellikle, yerine <rect> veya <polygon> öğesi kullanılarak bu durum için oluşturabileceğiniz bir <path> yoksa sadece dikdörtgenin üç tarafı kapsar <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" /> 

Burada eylem bu etkisini görebilirsiniz : http://jsfiddle.net/b5FrF/3/

fazla bilgi için

,hakkında okumakve daha güçlü ama daha kafa karıştırıcı <path> şekilleri.

Answer 2

Üç konturlu taraf için bir polyline kullanabilirsiniz ve sadece stroku dikdörtgene yerleştirmeyin. SVG'nin bir yolun/şeklin farklı bölümlerine farklı vuruşlar uygulamanızı sağladığını düşünmüyorum, bu yüzden aynı efekti elde etmek için birden çok nesne kullanmanız gerekir.

Answer 3

Strok veya strok yapma gereksiniminiz varsa, bunu yapmak için stroke-dasharray kodunu da kullanarak dikdörtgenin kenarları ile eşleşecek şekilde çizgi ve boşluklar oluşturabilirsiniz.

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>

jsfiddle bakınız.