web-dev-qa-db-ja.com

SVG Text要素内にHTMLコードを挿入する

Svg：textノードがあり、その中にHTMLコードを追加したい。実際、私のコードは次のとおりです。

<text x="10" y="54" text-anchor="start" class="barLegend">Hello!</text>

そして、私はこのようなものを置きたいです：

<text x="10" y="54" text-anchor="start" class="barLegend"><a href='www.gmail.com'>Gmail</a></text>

もちろん、リンクを機能させたいのですが、すべてのHTMLを表示しているだけです。

何か案が？

htmltextsvg
31
todotresde

ここを見てください：

http://web.archive.org/web/20120418122612/http://ajaxian.com/archives/foreignobject-hey-youve-got-html-in-my-svg

SVG foreignObjectタグを使用すると、非SVGコンテンツをページに混在させることができます。たとえば、SVG要素の途中にHTMLをドロップできます。

24
Jerome Cance

SVGを使用しない理由<a>この場合の要素？ただし、hrefはxlink：hrefにする必要があることを忘れないでください。例えば。

<text x="10" y="54" text-anchor="start" class="barLegend"><a xlink:href='http://www.gmail.com'>Gmail</a></text>

SVGアニメーション要素、説明要素（<title>または<desc>）、テキストコンテンツの子要素（<tspan>または<textPath>）またはSVG <a>要素は、テキスト要素の子として許可されます。

19
Robert Longson

foreignObjectタグを使用する必要があります。次に例を示します。

<foreignObject width="100" height="50"
                   requiredExtensions="http://example.com/SVGExtensions/EmbeddedXHTML">
  <body xmlns="http://www.w3.org/1999/xhtml">
    <a href='www.gmail.com'>Gmail</a>
  </body>
</foreignObject>

こちらもご覧ください http://www.w3.org/TR/SVG/extend.html および https://developer.mozilla.org/en/SVG/Element/foreignObject

4
ComFreek

ここでの別の解決策は、アイテムにイベントを配置し、javascriptを使用してターゲットURLを開き、タグをまったく使用しないことです。

2
Joseph Francis