Bagaimana cara mengatur stroke-width: 1 hanya pada sisi tertentu dari bentuk SVG?

93

Menyetel lebar guratan: 1 pada <rect>elemen di SVG menempatkan guratan pada setiap sisi persegi panjang.

Bagaimana seseorang menempatkan lebar guratan hanya pada tiga sisi persegi panjang SVG?

html svg vector-graphics inkscape pengguna782860
sumber

Jawaban:

167

Jika Anda membutuhkan goresan atau tanpa goresan maka Anda juga bisa menggunakan goresan-dasharray untuk melakukan ini, dengan membuat garis dan celah sesuai dengan sisi persegi panjang.

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

Lihat jsfiddle .

Erik Dahlström
sumber
Bagaimana kita bisa menampilkan goresan hanya di atas elemen persegi?
Suresh
Bisakah Anda menjelaskan mengapa angka tertentu pada posisi tertentu memberikan efek ini?
JacobIRR
@JacobIRR mengacu pada definisi properti 'stroke-dasharray' (ditautkan dalam jawaban). Idenya di sini adalah untuk mencocokkan panjang garis dengan sisi persegi panjang, dan celah garis dengan sisi yang seharusnya tidak memiliki goresan.
Erik Dahlström
Saya baru saja memperbarui solusi Anda, di tautan ini codepen.io/shaswatatripathy/pen/oNgPpyd
tripathy
Berikut adalah solusi terprogram yang menghasilkan stroke-dasharraysuatu objek yang menentukan batas mana yang harus ditampilkan. Membaca kode mungkin membantu Anda memahami cara kerjanya: codepen.io/lazd/pen/WNweNwy?editors=1010
lazd
30

Anda tidak dapat mengubah gaya visual berbagai bagian dari satu bentuk di SVG (tanpa modul Efek Vektor yang belum tersedia ). Sebagai gantinya, Anda perlu membuat bentuk terpisah untuk setiap goresan atau gaya visual lain yang ingin Anda variasikan.

Khusus untuk kasus ini, daripada menggunakan elemen <rect>atau <polygon>Anda dapat membuat <path>atau <polyline>yang hanya menutupi tiga sisi persegi panjang:

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

Anda dapat melihat efeknya beraksi di sini: http://jsfiddle.net/b5FrF/3/

Kotak merah dengan guratan di tiga sisi

Untuk informasi lebih lanjut, baca tentang <polyline>dan bentuk yang lebih kuat-tetapi-lebih-membingungkan <path>.

Phrogz
sumber
2

Anda bisa menggunakan polyline untuk tiga sisi yang digores, dan sama sekali tidak meletakkan goresan pada persegi panjang. Saya tidak berpikir SVG memungkinkan Anda menerapkan goresan yang berbeda ke berbagai bagian jalur / bentuk, jadi Anda perlu menggunakan banyak objek untuk mendapatkan efek yang sama.

wdebeaum.dll
sumber