Pengenalan kepada SVG 2D dalam HTML5 8—Ringkasan struktur dokumen dan elemen berkaitan_html5 kemahiran tutorial

Banyak elemen asas telah diperkenalkan sebelum ini, termasuk gabungan berkaitan struktur dan elemen guna semula Di sini kami akan meringkaskan secara ringkas baki elemen berkaitan dalam struktur dokumen SVG, dan kemudian bergerak ke hadapan untuk menghargai ciri SVG yang lain.
Elemen dokumen SVG pada asasnya boleh dibahagikan kepada kategori berikut:
•Elemen animasi: animate, animateColor, animateMotion, animateTransform, set; •Elemen Grafik: bulatan, elips, garis, laluan, poligon, poligaris, tegak
• Unsur struktur: def, g, svg, simbol,
• Elemen kecerunan: kecerunan linear, radialGradient; Elemen lain：a,altGlyphDef,clipPath,profil warna,kursor,penapis,fon,muka fon,Objek asing,imej,penanda,topeng,corak,skrip,gaya,suis,teks,pandangan, dsb.
Antaranya, elemen grafik, elemen kecerunan, teks, elemen imej dan gabungan semuanya telah diperkenalkan Berikut adalah beberapa elemen lain yang berkaitan dengan struktur.


Elemen View-svg

Anda boleh meletakkan sebarang elemen lain dalam sebarang susunan dalam elemen svg, termasuk elemen svg bersarang. Atribut yang biasa digunakan yang disokong oleh elemen svg ialah id, kelas, x, y, lebar, tinggi, kotak pandangan, preserveAspectRatio dan atribut isian dan lejang yang berkaitan. Acara yang disokong oleh elemen svg juga biasa digunakan onload, onmouseover, onmouseover, onmousedown, onmouseup, onclick, onfocusin, onfocusout, onresize, onscroll, onunload, dsb. Tidak banyak yang boleh dikatakan tentang elemen svg Untuk senarai lengkap atribut dan peristiwa, sila rujuk dokumentasi rasmi kemudian.


Elemen penerangan-unsur desc dan elemen tajuk

Setiap elemen bekas (elemen yang boleh mengandungi elemen bekas atau elemen grafik lain, seperti: a, defs, glyph, g, Penanda, topeng, glif hilang, corak, svg, suis dan simbol) dan elemen grafik boleh mengandungi elemen desc dan tajuk, yang kedua-duanya adalah elemen tambahan yang digunakan untuk menerangkan situasi berkaitan kandungannya ialah teks . Apabila dokumen SVG diberikan, kedua-dua elemen ini tidak akan dipaparkan ke dalam grafik. Perbezaan antara kedua-dua elemen ini tidak terlalu besar Dalam sesetengah pelaksanaan, tajuk muncul sebagai maklumat segera, jadi tajuk biasanya diletakkan di kedudukan pertama elemen induk. Penggunaan biasa adalah seperti berikut:

Salin kod

Kod adalah seperti berikut:

< ;svgxmlns="http://www.w3.org/2000/svg" version="1.1"width="4in"height="3in">

;title>Companysalesbyregion< ;/title>

Biasanya, elemen svg paling luar hendaklah disertakan dengan penerangan tajuk, supaya program lebih mudah dibaca.


Elemen penanda-penanda

Penanda mentakrifkan elemen grafik (anak panah dan penanda berbilang titik) yang dilampirkan pada satu atau lebih bucu (laluan, garisan, poligaris atau bucu poligon) ). Anak panah boleh dibuat dengan melampirkan penanda pada titik mula atau tamat laluan, garisan atau garis poli. Penanda berbilang titik boleh melampirkan penanda pada semua bucu laluan, garisan, poligaris atau poligon. Tanda

ditakrifkan oleh elemen penanda, dan kemudian hanya tetapkan atribut yang berkaitan (penanda, penanda-mula, penanda-pertengahan dan penanda-hujung) dalam laluan, garisan, poligon atau poligon. Ambil contoh:

Salin kod

Kodnya adalah seperti berikut:


< ;svgwidth=" 4in"height="2in"

viewBox="0040002000"version="1.1"

xmlns="http://www.w3.org/2000/svg"> ;defs> viewBox="001010"refX="0"refY="5" markerUnit="strokeWidth" markerWidth="4"markerHeight=" 3"

orient="auto">

theendofarrowhead. ;/desc>
fill="none"stroke="black"stroke-width="100"
marker-end="url(#Triangle)"/> ;

Mari kita lihat secara terperinci pengetahuan berkaitan penanda:
1 Penanda ialah elemen bekas yang boleh menyimpan elemen grafik, elemen bekas, animasi, elemen kecerunan, dll. dalam sebarang susunan.
2. Elemen penanda boleh mencipta tetingkap paparan baharu: tetapkan nilai Kotak paparan.
3. Atribut Penanda yang lebih penting:
markerUnits="strokeWidth|userSpaceOnUse"
Atribut ini mentakrifkan sistem koordinat yang digunakan oleh atribut markerWidth, markerHeight dan kandungan penanda. Atribut ini mempunyai dua nilai pilihan Nilai pertama, strokeWidth, ialah nilai lalai, yang bermaksud bahawa unit sistem koordinat yang digunakan oleh atribut markerWidth, markerHeight dan kandungan penanda adalah sama dengan nilai yang ditetapkan oleh stroke- lebar elemen grafik yang merujuk kepada penanda.

Sebagai contoh, dalam contoh di atas, lebar elemen penanda ialah 400 dan ketinggian ialah 300. Walau bagaimanapun, jangan keliru Koordinat yang digunakan oleh laluan dalam elemen tanda ialah koordinat pengguna baharu sistem yang ditetapkan oleh kotak pandangan.
Satu lagi nilai atribut ini ialah userSpaceOnUse, yang bermaksud bahawa atribut markerWidth, markerHeight dan kandungan penanda menggunakan sistem koordinat elemen grafik yang merujuk kepada penanda.
refX, refY: Tentukan koordinat kedudukan titik rujukan yang sejajar dengan penanda. Sebagai contoh, dalam contoh di atas, titik yang dirujuk ialah titik akhir, dan ia harus diselaraskan dengan kedudukan (0,5) penanda. Ambil perhatian bahawa refX dan refY menggunakan sistem koordinat pengguna akhir yang diubah oleh kotak pandangan.
markerWidth, markerHeight: Lebar dan ketinggian tetingkap penanda Ini mudah difahami.
orient: mentakrifkan sudut putaran penanda. Anda boleh menentukan sudut atau menetapkan auto secara langsung.
auto bermaksud arah positif paksi-x diputar mengikut peraturan berikut :
a Jika titik di mana penanda terletak hanya tergolong dalam satu laluan, x positif -arah paksi penanda adalah sama dengan arah laluan. Lihat contoh di atas.
b. Jika titik di mana penanda terletak tergolong dalam dua laluan yang berbeza, maka arah paksi-x positif penanda adalah konsisten dengan pembahagi dua sudut antara dua laluan.
4. Atribut penanda elemen grafik

Jika elemen grafik ingin merujuk penanda, ia perlu menggunakan atribut yang berkaitan, terutamanya ketiga-tiga ini: penanda-mula (letakkan penanda yang dirujuk pada titik permulaan) , penanda- pertengahan (letak penanda yang dirujuk pada semua titik kecuali titik permulaan dan titik akhir), penanda-akhir (letak penanda yang dirujuk pada titik akhir). Nilai bagi ketiga-tiga atribut ini mungkin tiada (bermaksud tidak merujuk kepada penanda), rujukan penanda (merujuk kepada penanda tertentu), dan mewarisi (tidak perlu mengatakan lebih lanjut mengenai perkara ini).
Anda juga boleh melihat penggunaan penanda daripada contoh di atas.

Elemen skrip dan gaya-skrip dan elemen gaya
Malah, pada asasnya semua atribut (untuk semua elemen, bukan hanya teks) boleh dikaitkan dengan elemen menggunakan CSS, Dan semua Sifat CSS tersedia dalam imej SVG. Anda boleh terus menggunakan atribut gaya untuk menggayakan elemen, atau merujuk kepada helaian gaya untuk menggayakan elemen. Lembaran gaya tidak boleh dihuraikan untuk fail XML (kerana kadangkala ia mengandungi aksara yang boleh menyebabkan masalah), jadi ia perlu diletakkan dalam bahagian XMLCDATA. Begitu juga dengan skrip, yang perlu diletakkan di bahagian XMLCDATA. Lihat contoh CSS berikut:

Salin kod

Kodnya adalah seperti berikut:

Teks 🎜>
.singkatan{text-decoration:underline;}
]]>
< /defs>
="20"y ="100"font-size="30">oleh mereka
R >G
Bnilai
ataubykeywordssuchas

lightsteelblue,


< /svg>


Lihat contoh skrip sekali lagi:

Salin kod

kod adalah seperti berikut:

Scriptingtheonclickevent


functionhideReveal(evt){
varimageTarget=evt.target;
vartheFill=imageTarget.getAttribute("fill");
if(theFill=='white')
imageTarget.setAttribute("fill","url(#notes)");
lain
imageTarget.setAttribute("fill","white");
}
]]>

patternTransform="rotate(15)"
patternUnits="userSpaceOnUse"> ;

lebar lejang="3" lejang="hitam"/>
lebar lejang="3" lejang="hitam"/>


fill="url(#notes)"stroke="black" stroke-width="5"/>

条件处理-switch元素
条件处理属性是能控制所在岃染的。大多数的元素(特别是图形元素)都可以指定条件处理属性。条件处理属性有3个：diperlukanCiri-ciri,diperlukanExtensions和systemLanguage。这些属性就这属性就罕性小指定一个值列表(前面两个属性是空格隔开的，语言这个属性是使用逗号隔开的)，默认值都为true。

SVG的switch元素提供了按指定条件渲染的能力。switch元素了按指定条件渲染的能力。switch元素是元素了按指定条件渲染的能力。switch元素是元素是元素是中以包含图形元素，解释性元素，动画元素，a, foreignObject,g,imej,svg,suis,teks,guna等元素。switch元素会按顺序检查直接子元素的条件处理属性，然后懺的话第一个子元素，其他的子元素都会被忽略paparan的元素)。简单的说，这3个属性会影响a,altGlyph,foreignObject, textPath,tref,tspan,animate,animateColor,animateMotion,animateTransform,set等元素，不会影响defs,kursor,mask,clipPath,pattern等元素(这些元素那乘元素那乘元素那乘元素那乘元素那乘乯丱是引用别的元素)。

注意：子元素的display和visibility属性值并不影响switch元素条件判断的结果值列表参看官方文档，这里就看一个小例子：

复制代码代码如下:

<
x="10"y="10"width="322"height="502"opacity ="0.6"
isi="black"stroke="none"filter="url(#gblurshadow)"/>
isi="black"stroke="none"/>

这个例子的意思简单的说就是：使用的浏览器支持filter特性，那么就绘刳性)，如果不支持filter特性，就绘制下面的矩形。
其实更多的时候，用的比较多的属性是systemLanguage，就是文本的多语言处理能力。例如>复制代码

代码如下:

de-HAHA

en-haha

实用参考
：
脚本索引：
http://msdn.microsoft.com/zh-cn/library/ff971910(v=vs.85 ).aspx

开发中心：https://developer.mozilla.org/en/SVG
热门参考：http://www.chinasvg.com/
官方文档：http://www.w3.org/TR/SVG11/