با سلام خدمت کاربران گرامی سایت پی وی لرن و کاربرانی که علاقمند به دوره آموزش SVG هستند. در جلسه گذشته با واکنش گرایی و ایجاد آن در svg آشنا شدیم. در این جلسه قرار است به آموزش پیوند سازی در svg بپردازیم.
در ادامه مبحث آموزش پیوند سازی در svg یا لینک سازی در svg، به عناصر و المنت هایی که در ایجاد پیوند نقش دارند خواهیم پرداخت.
در svg از عنصر <a> برای ایجاد لینک استفاده می شود.
از ویژگی “xlink:href” برای انتقال و تکمیل IRI یا (Uniform Resource Identifiers) استفاده می شود.
در توضیح زیر ساختار عنصر <a> می بینید. سعی کرده ایم که فقط ویژگی های اصلی را نشان دهیم.
1 2 3 4 5 6 | <a xlink:show = "new" | "replace" xlink:actuate = "onRequest" xlink:href = "<IRI>" target = "_replace" | "_self" | "_parent" | "_top" | "_blank" | "<XML-Name>" > </a> |
نام و توضیحات ویژگی | شماره ویژگی |
xlink:show −با هدف سند سازی برای پردازنده های XLink مورد استفاده است. به صورت پیش فرض در حالت new است. | |
xlink:actuate − با هدف سند سازی برای پردازنده های XLink مورد استفاده است. | |
xlink:href − این ویژگی به مکان referenced object اشاره می کند. | |
target − هنگامی که اهداف پایان دهی به منابع موجود باشند از این ویژگی استفاده می شود. |
testSVG.htm
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <html> <title>SVG Linking</title> <body> <h1>Sample Link</h1> <svg width="800" height="800"> <g> <a xlink:href="http://www.tutorialspoint.com"> <text x="0" y="15" fill="black" > Click me to load TutorialsPoint DOT COM.</text> </a> </g> <g> <text x="0" y="65" fill="black" > Click in the rectangle to load TutorialsPoint DOT COM</text> <a xlink:href="http://www.tutorialspoint.com"> <rect x="100" y="80" width="300" height="100" style="fill:rgb(121,0,121);stroke-width:3;stroke:rgb(0,0,0)" /> </a> </g> </svg> </body> </html> |
textSVG.htm را در مرورگر وب Chrome باز کنید. شما می توانید از Chrome / Firefox / Opera برای مشاهده تصویر SVG به طور مستقیم و بدون هیچ افزونه ای استفاده نمایید.
اینترنت اکسپلورر ۹ و نسخه های بالا تر آن نیز از رندر تصویر SVG پشتیبانی می کند.
در این جلسه از سلسله جلسات آموزش SVG ، به آموزش پیوند سازی در svg پرداختیم.
در جلسه بعدی فصل تازه ای از آموزش svg را آغاز می کنیم و قرار است به مبحث مهم Demo در SVG بپردازیم.
جلسه بعدی اولین جلسه از آموزش Demo در svg است و شروع این فصل جدید نیز با مبحث Loaders Example خواهد بود.
با پی وی لرن همراه باشید.