Mam węzeł svg: text i chcę dodać do niego kod HTML. Faktycznie, mój kod jest:Wstaw kod HTML wewnątrz SVG Element tekstowy
<text x="10" y="54" text-anchor="start" class="barLegend">Hello!</text>
I chcę umieścić coś takiego:
<text x="10" y="54" text-anchor="start" class="barLegend"><a href='www.gmail.com'>Gmail</a></text>
Oczywiście, chcę działający link, ale to jest po prostu wyświetlając wszystkie HTML.
Każdy pomysł?
Spójrz tutaj:
Znacznik SVG foreignObject pozwala wymieszać zawartość niezwiązana z SVG do swojej strony. Na przykład możesz upuścić trochę kodu HTML w środku elementu SVG.
Musisz użyć tagu foreignObject, na przykład:
<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>
Zobacz również tutaj http://www.w3.org/TR/SVG/extend.html i https://developer.mozilla.org/en/SVG/Element/foreignObject
Znacznik foreignObject nie może być elementem podrzędnym elementu tekstowego. –
Dzięki! To sposób na wykorzystanie tego, czego szukam. Znalazłem też link, gdy ktoś ma taki sam problem z D3: http://groups.google.com/group/d3-js/browse_thread/thread/77671e2884df4f1d – todotresde
Dlaczego nie zastosować element SVG <a> w tym przypadku? Nie zapominaj, że href musi być xlink: href chociaż. Na przykład.
<text x="10" y="54" text-anchor="start" class="barLegend"><a xlink:href='http://www.gmail.com'>Gmail</a></text>
tylko elementy animacji SVG, elementy opisowe (<title> lub <desc>), zawartość tekstu elementy potomne (<tspan> lub <textPath>) lub element SVG <a> są dopuszczone jako dzieci elementów tekstowych.
Mmmm, nie jest jasne, jaka jest różnica. Czy mógłbyś dodać przykład? – todotresde
element svg link znajduje się w przestrzeni nazw svg, element html link znajduje się w przestrzeni nazw HTML, w przeciwnym razie wyglądają podobnie. –
Innym rozwiązaniem jest umieszczenie zdarzenia na elemencie i użycie javascript do otwarcia docelowego adresu URL .. i nie używanie w ogóle tagu.
Witamy w stackoverflow. To nie daje odpowiedzi na pytanie. Po uzyskaniu wystarczającej reputacji będziesz mógł komentować każdy post; zamiast tego udziel odpowiedzi, które nie wymagają wyjaśnień od pytającego. –
Nie zapewnia to odpowiedzi na pytanie. Gdy masz już wystarczającą [reputację] (https://stackoverflow.com/help/whats-reputation), będziesz mógł [komentować dowolny wpis] (https://stackoverflow.com/help/privileges/comment); zamiast tego [dostarczaj odpowiedzi, które nie wymagają wyjaśnień od pytającego] (https://meta.stackexchange.com/questions/214173/why-do-i-need-50-reputation-to-comment-what-can- i-do-zamiast). - [Z recenzji] (/ opinia/niskiej jakości-posts/17222974) – Omi
Znacznik foreignObject nie może być elementem podrzędnym elementu tekstowego. –
Dzięki! Znaleziono rozwiązanie dla tego linku: http://groups.google.com/group/d3-js/browse_thread/thread/77671e2884df4f1d – todotresde
Niestety IE nie obsługuje foreignObject –