SVG ສາຍສອນ

ການປ່ຽນສະແດງ SVG ຕ້ອງຈະຖືກອະທິບາຍໃນ <defs>.

ການປ່ຽນສະແດງສະຫລາຍລະຫວ່າງວົງປະຕູ

<radialGradient> ທີ່ຈະອະທິບາຍການປ່ຽນສະແດງສະຫລາຍລະຫວ່າງວົງປະຕູ.

<radialGradient> ອາດຈະບໍ່ໄດ້ສະເພາະກັນໃນ <defs>. <defs> ແມ່ນຫຍັງຂອງ definitions, ມັນຈະອະນຸຍາດການອະທິບາຍສາມຫລາຍສະແດງ ເຊັ່ນ: ການປ່ຽນສະແດງ.

ກະລຸນາສໍາເນົາລະບຽບດ້ານຫລັງລົງໄປໃນເອກະສານການບັນທຶກ, ແລະກັບຕັ້ງເບື້ອງວ່າ "radial1.svg". ສົ່ງເອກະສານດັ່ງກ່າວໄປໃນສາຍເວັບຂອງທ່ານ:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="grey_blue" cx="50%" cy="50%" r="50%">
fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(200,200,200);
stop-opacity:0"/>
<stop offset="100%" style="stop-color:rgb(0,0,255);
stop-opacity:1"/>
</radialGradient>
</defs>
<ellipse cx="230" cy="200" rx="110" ry="100"
style="fill:url(#grey_blue)"/>
</svg>

ການອະທິບາຍລະບຽບ:

<radialGradient id="grey_blue" cx="50%" cy="50%" r="50%"> ອາດມີຈຸດໝາຍ id ທີ່ຈະຈຳກັດຊື່ອັນສະນະພາບ, fill:url(#grey_blue) ອາດມີສະໜັບສະໜູນບັນດາ ສາມຫລາຍສະແດງ ສະໜັບສະໜູນ ສາມຫລາຍສະແດງ ວົງປະຕູຫລາຍກັບ cx, cy ແລະ r, ແຕ່ fx ແລະ fy ຈະມີສະໜັບສະໜູນວົງປະຕູກາງ. ຂອບແລະມີຄວາມສະແດງສະຫລາຍລະຫວ່າງສາມຫລາຍຫລືຫລາຍລະຫວ່າງບາງສາມ. ທຸກສາມສະແດງຈະຕ້ອງບໍ່ເວັ້ນດ້ວຍ <stop> ອີງຕາມ. ຄວາມການສ້າງ offset ຈະນຳໄປສະແດງການເລີ່ມຂອງການປ່ຽນສະແດງແລະການສິ້ນສຸດ.

SVG ສາຍສອນ

ບັນນາທິດອື່ນໆ:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient id="grey_blue" cx="20%" cy="40%" r="50%"
fx="50%" fy="50%">
<stop offset="0%" style="stop-color:rgb(200,200,200);
stop-opacity:0"/>
<stop offset="100%" style="stop-color:rgb(0,0,255);
stop-opacity:1"/>
</radialGradient>
</defs>
<ellipse cx="230" cy="200" rx="110" ry="100"
style="fill:url(#grey_blue)"/>
</svg>

SVG ສາຍສອນ