Bisakah Anda mengontrol bagaimana langkah-lebar SVG ditarik?

Saat ini sedang membangun aplikasi SVG berbasis browser. Dalam aplikasi ini, berbagai bentuk dapat ditata dan diposisikan oleh pengguna, termasuk persegi panjang.

Ketika saya menerapkan elemen stroke-widthSVG rectkatakan 1px, stroke diterapkan ke rectoffset dan inset dengan cara yang berbeda oleh browser yang berbeda. Ini terbukti merepotkan, terutama ketika saya mencoba menghitung lebar luar dan posisi visual persegi panjang dan menempatkannya di sebelah elemen lain.

Sebagai contoh:

• Firefox menambahkan inset 1px (bawah dan kiri), dan offset 1px (atas dan kanan)
• Chrome menambahkan inset 1px (atas dan kiri), dan offset 1px (bawah dan kanan)

Satu-satunya solusi saya sejauh ini adalah dengan menggambar batas aktual sendiri (mungkin dengan pathalat) dan memposisikan perbatasan di belakang elemen yang dibelai. Tetapi solusi ini merupakan solusi yang tidak menyenangkan, dan saya lebih suka untuk tidak turun jalan ini jika mungkin.

Jadi pertanyaan saya adalah, dapatkah Anda mengontrol bagaimana SVG stroke-widthdigambarkan pada elemen?

Tidak, Anda tidak bisa menentukan apakah goresannya digambar di dalam atau di luar elemen. Saya membuat proposal ke kelompok kerja SVG untuk fungsi ini pada tahun 2003, tetapi tidak menerima dukungan (atau diskusi).

Seperti yang saya catat dalam proposal,

• Anda dapat mencapai hasil visual yang sama dengan "di dalam" dengan menggandakan lebar goresan Anda dan kemudian menggunakan jalur kliping untuk klip objek ke dirinya sendiri, dan
• Anda dapat mencapai hasil visual yang sama dengan 'luar' dengan menggandakan lebar goresan dan kemudian menirukan salinan tanpa goresan objek di atasnya.

Sunting : Jawaban ini mungkin salah di masa mendatang. Seharusnya dimungkinkan untuk mencapai hasil ini menggunakan Efek Vektor SVG , dengan menggabungkan veStrokePathdengan veIntersect(untuk 'dalam') atau dengan veExclude(untuk 'luar'). Namun, Vector Effects masih merupakan modul konsep kerja tanpa implementasi yang belum dapat saya temukan.

Sunting 2 : Spesifikasi konsep SVG 2 mencakup stroke-alignmentproperti (dengan nilai tengah | di dalam | di luar kemungkinan). Properti ini akhirnya bisa menjadi UA.

Sunting 3 : Yang mengherankan dan mengecewakan, kelompok kerja SVG telah dihapus stroke-alignmentdari SVG 2. Anda dapat melihat beberapa masalah yang dijelaskan setelah prosa di sini .

UPDATE: The stroke-alignmentAtribut pada 1 April 2015 pindah ke spec yang disebut Strokes SVG benar-benar baru .

Pada Draft Editor SVG 2.0 tanggal 26 Februari 2015 (dan mungkin sejak 13 Februari) ),itu stroke-alignment properti hadirdengan nilai inner, center (default) danouter .

Tampaknya bekerja dengan cara yang sama dengan stroke-locationproperti yang diusulkan oleh @Phrogz dan stroke-positionsaran selanjutnya . Properti ini telah direncanakan sejak setidaknya 2011, tetapi terlepas dari anotasi yang mengatakan

SVG 2 harus mencakup cara untuk menentukan posisi stroke

, tidak pernah dirinci dalam spesifikasi karena ditangguhkan - sampai sekarang, tampaknya.

Tidak ada browser yang mendukung properti ini, atau, sejauh yang saya tahu, salah satu fitur SVG 2 baru, namun mudah-mudahan mereka akan segera setelah spesifikasi matang. Ini adalah properti yang secara pribadi saya ingin miliki, dan saya sangat senang akhirnya ada di spec.

Tampaknya ada beberapa masalah tentang bagaimana properti harus berperilaku di jalur terbuka serta loop. Masalah-masalah ini, kemungkinan besar, akan memperpanjang implementasi lintas browser. Namun, saya akan memperbarui jawaban ini dengan informasi baru ketika browser mulai mendukung properti ini.

Saya menemukan cara mudah, yang memiliki beberapa batasan, tetapi berhasil bagi saya:

• mendefinisikan bentuk dalam defs
• menentukan jalur klip yang mereferensikan bentuk
• gunakan dan gandakan goresan dengan saat bagian luar terpotong

Berikut ini contoh kerjanya:

<svg width="240" height="240" viewBox="0 0 1024 1024">
<defs>
	<path id="ld" d="M256,0 L0,512 L384,512 L128,1024 L1024,384 L640,384 L896,0 L256,0 Z"/>
	<clipPath id="clip">
		<use xlink:href="#ld"/>
	</clipPath>
</defs>
<g>
	<use xlink:href="#ld" stroke="#0081C6" stroke-width="160" fill="#00D2B8" clip-path="url(#clip)"/>
</g>
</svg>

Anda dapat menggunakan CSS untuk memberi gaya urutan goresan dan isi. Artinya, stroke dulu lalu isi kedua, dan dapatkan efek yang diinginkan.

MDN di paint-order: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/paint-order

Kode CSS:

paint-order: stroke;

Berikut adalah fungsi yang akan menghitung berapa banyak piksel yang perlu Anda tambahkan - menggunakan goresan yang diberikan - ke atas, kanan, bawah dan kiri, semuanya berdasarkan browser:

var getStrokeOffsets = function(stroke){

        var strokeFloor =       Math.floor(stroke / 2),                                                                 // max offset
            strokeCeil =        Math.ceil(stroke / 2);                                                                  // min offset

        if($.browser.mozilla){                                                                                          // Mozilla offsets

            return {
                bottom:     strokeFloor,
                left:       strokeFloor,
                top:        strokeCeil,
                right:      strokeCeil
            };

        }else if($.browser.webkit){                                                                                     // WebKit offsets

            return {
                bottom:     strokeCeil,
                left:       strokeFloor,
                top:        strokeFloor,
                right:      strokeCeil
            };

        }else{                                                                                                          // default offsets

            return {
                bottom:     strokeCeil,
                left:       strokeCeil,
                top:        strokeCeil,
                right:      strokeCeil
            };

        }

    };

Seperti yang dicatat oleh orang-orang di atas, Anda harus menghitung ulang offset ke koordinat path stroke atau menggandakan lebar dan kemudian menutupi satu sisi atau yang lain, karena SVG tidak hanya secara alami mendukung penyelarasan stroke Illustrator, tetapi PostScript tidak juga .

Spesifikasi untuk stroke dalam Manual Adobe PostScript negara edisi ke-2: " 4.5.1 Sambil membelai: The Stroke Operator menarik garis dari beberapa ketebalan sepanjang jalan saat Untuk setiap segmen lurus atau melengkung di jalan,. Stroke menarik garis yang berpusat pada segmen dengan sisi yang sejajar dengan segmen. " (Penekanan mereka)

Spesifikasi lainnya tidak memiliki atribut untuk mengimbangi posisi garis. Ketika Illustrator memungkinkan Anda menyelaraskan di dalam atau di luar, itu menghitung ulang offset jalur yang sebenarnya (karena itu masih lebih murah secara komputasi daripada mencetak lebih dari lalu menutupi). Koordinat jalur dalam dokumen .ai adalah referensi, bukan apa yang di-raster atau diekspor ke format final.

Karena format asli Inkscape adalah spec SVG, ia tidak dapat menawarkan fitur yang tidak dimiliki spec.

Berikut ini adalah pekerjaan untuk menggunakan batas dalam dan .rectsymboluse

Contoh : https://jsbin.com/yopemiwame/edit?html,output

SVG :

<svg>
  <symbol id="inner-border-rect">
    <rect class="inner-border" width="100%" height="100%" style="fill:rgb(0,255,255);stroke-width:10;stroke:rgb(0,0,0)">
  </symbol>
  ...
  <use xlink:href="#inner-border-rect" x="?" y="?" width="?" height="?">
</svg>

Catatan: Pastikan untuk mengganti ?in usedengan nilai real.

Latar Belakang : Alasan mengapa ini bekerja adalah karena simbol menetapkan viewport baru dengan mengganti symboldengan svgdan menciptakan unsur dalam DOM bayangan. Ini svgdari bayangan DOM kemudian dihubungkan ke SVGelemen Anda saat ini . Perhatikan bahwa svgs dapat disarangkan dan setiap svgmembuat viewport baru, yang memotong semua yang tumpang tindih, termasuk perbatasan yang tumpang tindih. Untuk ikhtisar yang lebih terperinci tentang apa yang terjadi, baca artikel fantastis ini oleh Sara Soueidan.

Saya tidak tahu bagaimana itu akan membantu tetapi dalam kasus saya, saya hanya membuat lingkaran lain dengan perbatasan saja dan meletakkannya "di dalam" bentuk lainnya.

Solusi (kotor) yang mungkin adalah dengan menggunakan pola,

di sini adalah contoh dengan segitiga di dalam:

https://jsfiddle.net/qr3p7php/5/

<style>
#triangle1{
  fill: #0F0;
  fill-opacity: 0.3;
  stroke: #000;
  stroke-opacity: 0.5;
  stroke-width: 20;
}
#triangle2{
  stroke: #f00;
  stroke-opacity: 1;
  stroke-width: 1;
}    
</style>

<svg height="210" width="400" >
    <pattern id="fagl" patternUnits="objectBoundingBox" width="2" height="1" x="-50%">
        <path id="triangle1" d="M150 0 L75 200 L225 200 Z">
    </pattern>    
    <path id="triangle2" d="M150 0 L75 200 L225 200 Z" fill="url(#fagl)"/>
</svg>

Solusi dari Xavier Ho untuk menggandakan lebar goresan dan mengubah urutan cat adalah brilian, meskipun hanya berfungsi jika isiannya berwarna solid, tanpa transparansi.

Saya telah mengembangkan pendekatan lain, lebih rumit tetapi bekerja untuk mengisi apa pun. Ini juga bekerja di elips atau jalur (dengan yang kemudian ada beberapa kasus sudut dengan perilaku aneh, misalnya jalur terbuka yang melintasi diri mereka sendiri, tetapi tidak banyak).

Caranya adalah dengan menampilkan bentuk dalam dua lapisan. Satu tanpa goresan (hanya isian), dan satunya lagi dengan goresan dengan lebar ganda (isian transparan) dan melewati topeng yang menunjukkan seluruh bentuk, tetapi menyembunyikan bentuk asli tanpa goresan.

  <svg width="240" height="240" viewBox="0 0 1024 1024">
  <defs>
    <path id="ld" d="M256,0 L0,512 L384,512 L128,1024 L1024,384 L640,384 L896,0 L256,0 Z"/>
    <mask id="mask">
      <use xlink:href="#ld" stroke="#FFFFFF" stroke-width="160" fill="#FFFFFF"/>
      <use xlink:href="#ld" fill="#000000"/>
    </mask>
  </defs>
  <g>
    <use xlink:href="#ld" fill="#00D2B8"/>
    <use xlink:href="#ld" stroke="#0081C6" stroke-width="160" fill="red" mask="url(#mask)"/>
  </g>
  </svg>