Svg-linking

提供:Dev Guides
移動先:案内検索

SVG-リンク

<a>要素は、ハイパーリンクを作成するために使用されます。 「xlink:href」属性は、URI(Uniform Resource Identifier)を補完するIRI(Internationalized Resource Identifiers)を渡すために使用されます。

宣言

以下は、 <a> 要素の構文宣言です。 主な属性のみを示しました。

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

属性

Sr.No. Name & Description
1 xlink:show − for documentation purpose for XLink aware processors. Default is new.
2 xlink:actuate − for documentation purpose for XLink aware processors.
3 xlink:href − location of the referenced object.
4 target − used when targets for the ending resource are possible.

テストVG

<html>
   <title>SVG Linking</title>
   <body>

      <h1>Sample Link</h1>

      <svg width="800" height="800">
         <g>
            <a xlink:href="http://www.finddevguides.com">
               <text x="0" y="15" fill="black" >
               Click me to load finddevguides DOT COM.</text>
            </a>
         </g>

         <g>
            <text x="0" y="65" fill="black" >
            Click in the rectangle to load finddevguides DOT COM</text>

            <a xlink:href="http://www.finddevguides.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>

出力

ChromeウェブブラウザでテキストSVGを開きます。 Chrome/Firefox/Operaを使用して、プラグインなしでSVG画像を直接表示できます。 Internet Explorer 9以降もSVG画像レンダリングをサポートしています。 リンクと長方形をクリックして、結果を確認します。

link:/cgi-bin/printpage.cgi [__印刷]