Menguasai atribut SVG ' s Stroke-Miterlimit

SVG's stroke-miterlimit Property, anda mungkin melihatnya ketika mengeksport SVG dalam editor grafik, atau mendapati bahawa kesan visual tidak berubah dalam apa jua cara setelah memadamkannya. Artikel ini meneroka harta SVG ini secara mendalam dan mendedahkan hubungannya dengan harta stroke-linejoin .

Penerangan ringkas

stroke-miterlimit bergantung kepada stroke-linejoin : Jika round atau bevel digunakan pada sambungan, tidak perlu mengisytiharkan stroke-miterlimit . Tetapi jika anda menggunakan miter , nilai lalai mungkin mencukupi walaupun anda memadamkannya. Harus diingat bahawa banyak perisian grafik menambah harta ini walaupun ia tidak diperlukan.

Penjelasan terperinci mengenai stroke-linejoin

Harta stroke-linejoin mentakrifkan bentuk jalan atau garis besar bentuk asas di sudut. Ia menentukan penampilan sudut dua baris di persimpangan . Harta ini menerima lima nilai yang mungkin, tetapi dua daripadanya tidak dilaksanakan oleh penyemak imbas dan dikenal pasti oleh spesifikasi yang mungkin dihapuskan. Berikut adalah tiga nilai yang disokong:

• miter (lalai): Dua baris bersilang pada sudut akut.
• round : Sudut bulat.
• bevel : Sudut rata, sama dengan sudut potong.

stroke-miterlimit Penjelasan Terperinci

Harta stroke-miterlimit mentakrifkan jarak tepi garis besar meluas apabila membuat sudut miter . Harta ini hanya sah apabila stroke-linejoin ditetapkan untuk miter .

Nilai stroke-miterlimit boleh menjadi integer positif, dengan nilai lalai 4. Semakin besar nilai, lebih jauh bentuk sudut membolehkan untuk diperluaskan.

Sinergi atribut

stroke-linejoin dan stroke-miterlimit bekerja bersama-sama. Apabila stroke-linejoin ditetapkan untuk miter dan panjang miter dibahagikan dengan lebar strok melebihi stroke-miterlimit , miter akan ditukar kepada bevel .

Dengan kata lain:

 <code>[斜接长度] / [笔划宽度] > [stroke-miterlimit] = bevel [斜接长度] / [笔划宽度] </code>

Jika miter tidak dapat melebihi lebar strok, ia harus menjadi sudut miter ;

Tetapan sekatan miter dalam aplikasi reka bentuk

Banyak aplikasi reka bentuk menyediakan cara untuk menetapkan sambungan dan sekatan miter . Berikut adalah beberapa contoh:

Adobe Illustrator

Illustrator membolehkan mengubah nilai miter apabila mengkonfigurasi pukulan jalan. Ia boleh didapati dalam tetapan strok jalan. Harus diingat bahawa nilai "had" hanya boleh ditetapkan apabila "nether" laluan ditetapkan kepada "sambungan cermin".

Had miter lalai untuk ilustrator adalah 10, bukan 4 dalam spesifikasi. Apabila mengeksport fail SVG atau kod SVG salin secara langsung, Illustrator akan menambah stroke-miterlimit="10" walaupun nilai had miter tidak berubah. Illustrator menambah harta ini walaupun stroke-linejoin ditetapkan ke round . Penyelesaian:

• Tetapkan nilai had kepada 4.
• Gunakan eksport sebagai atau eksport sebagai pilihan skrin dan bukannya simpan sebagai atau salinan dan tampal vektor secara langsung.

Figma

Di Figma, klik pada nod sudut bentuk, dan di bawah tiga mata di bahagian "strok", anda boleh mencari tempat di mana sudut disambungkan. Secara lalai, pilihan Miter Sudut muncul, tetapi hanya muncul jika sambungan ditetapkan ke miter .

Figma membolehkan menetapkan sudut miter dalam unit darjah dan bukannya nilai perpuluhan. Beberapa perkara halus untuk diperhatikan:

• Sudut lalai adalah 7.17 °, dan nilai yang lebih rendah tidak boleh ditetapkan. Apabila mengeksport SVG, nilai menjadi stroke-miterlimit='16' dalam tag.
• Nilai maksimum bevel 180 °.
• Apabila mengeksport menggunakan sambungan bevel , stroke-miterlimit mengekalkan nilai yang ditetapkan apabila sudut miter terakhir diaktifkan.
• Apabila mengeksport menggunakan sambungan round , laluannya berkembang, tidak lagi mempunyai strok, tetapi jalan yang mengisi warna.

Inkscape

Inkscape berfungsi dengan cara yang konsisten seperti yang diharapkan. Apabila memilih sambungan miter , nilai lalai ialah 4. Apabila nilai adalah nilai lalai, stroke-miterlimit dikecualikan daripada kod SVG yang dieksport. Walau bagaimanapun, jika mana-mana laluan dengan bevel atau round dieksport selepas mengubah suai had, stroke-miterlimit akan kembali ke kod kecuali nilai dalam kotak "had" disimpan pada nilai lalai 4.

Meringkaskan

Hartanah stroke-miterlimit mudah diabaikan, terutamanya apabila mengoptimumkan fail SVG. Memahami bagaimana ia berfungsi, bagaimana ia berfungsi bersempena dengan stroke-linejoin dan mengapa sambungan bevel mungkin berlaku apabila menetapkan nilai had miter akan membantu menggunakan harta ini dengan lebih baik.

Atas ialah kandungan terperinci Menguasai atribut SVG ' s Stroke-Miterlimit. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!