۲۵
اسفند

جلسه ۰۹ : آموزش پیوند سازی در SVG

دسته‌بندی‌ها :

جزئیات
نوع محتواآموزش تصویری

فهرست

مقدمه

با سلام خدمت کاربران گرامی سایت پی وی لرن و کاربرانی که علاقمند به دوره آموزش SVG هستند. در جلسه گذشته با واکنش گرایی و ایجاد آن در svg آشنا شدیم. در این جلسه قرار است به آموزش پیوند سازی در svg بپردازیم.

آموزش پیوند سازی در SVG

در ادامه مبحث آموزش پیوند سازی در svg یا لینک سازی در svg، به عناصر و المنت هایی که در ایجاد پیوند نقش دارند خواهیم پرداخت.
در svg از عنصر <a> برای ایجاد لینک استفاده می شود.
از ویژگی “xlink:href” برای انتقال و تکمیل IRI یا (Uniform Resource Identifiers) استفاده می شود.

اعلام

در توضیح زیر ساختار عنصر <a> می بینید. سعی کرده ایم که فقط ویژگی های اصلی را نشان دهیم.

مثال :

<a
   xlink:show = "new" | "replace"
   xlink:actuate = "onRequest"
   xlink:href = "<IRI>"
   target = "_replace" | "_self" | "_parent" | "_top" | "_blank" | "<XML-Name>" >
</a>

xlink:show = "new" | "replace"

xlink:actuate = "onRequest"

xlink:href = "<IRI>"

</a>

ویژگی ها

نام و توضیحات ویژگی	شماره ویژگی
xlink:show −با هدف سند سازی برای پردازنده های XLink مورد استفاده است. به صورت پیش فرض در حالت new است.
xlink:actuate − با هدف سند سازی برای پردازنده های XLink مورد استفاده است.
xlink:href − این ویژگی به مکان referenced object اشاره می کند.
target − هنگامی که اهداف پایان دهی به منابع موجود باشند از این ویژگی استفاده می شود.

مثال

testSVG.htm

مثال : estSVG.htm

<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>

<html>

<title>SVG Linking</title>

<body>

<h1>Sample Link</h1>

<g>

Click me to load TutorialsPoint DOT COM.</text>

</a>

</g>

<g>

Click in the rectangle to load TutorialsPoint DOT COM</text>

<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 پرداختیم.
در جلسه بعدی فصل تازه ای از آموزش svg را آغاز می کنیم و قرار است به مبحث مهم Demo در SVG بپردازیم.
جلسه بعدی اولین جلسه از آموزش Demo در svg است و شروع این فصل جدید نیز با مبحث Loaders Example خواهد بود.
با پی وی لرن همراه باشید.

جلسه ۰۸ : ایجاد واکنش گرایی در SVG

به اشتراک بگذارید

linking in SVG ,آموزش svg ,آموزش اس وی جی ,آموزش پیوند سازی در SVG ,پیوند سازی در SVG

دیدگاه کاربران

تعداد دیدگاه : 0

پی وی لرن – آموزش برنامه نویسی و طراحی وب سایت

دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)

جلسه ۰۹ : آموزش پیوند سازی در SVG

مقدمه

آموزش پیوند سازی در SVG

اعلام

ویژگی ها

مثال

خروجی

کلام آخر

لیست مطالب دوره

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ