SVG中的网页链接 [英] web link in svg

问题描述

我需要在svg图中包含链接文本.这是我所做的

I need to have a linked text inside a svg graph. Here is what I did

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="138pt" height="188pt" viewBox="0.00 0.00 138.00 188.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:html="http://www.w3.org/1999/xhtml">
  <g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 184)">
    <g id="node5" class="node"><title>EQ2</title>
      <ellipse style="fill:none;stroke:black;" cx="65" cy="-18" rx="29.1851" ry="18"/>
      <text text-anchor="middle" x="65" y="-13.9" style="font-family:Times New Roman;font-size:14.00;">foo <html:a href="http://google.com">bar</html:a></text>
    </g>
  </g>
</svg>

我希望html和html:a标记的名称空间将导致条形文字的正确处理.但是我得到的是没有显示栏.如答案中所建议，我可以使用svg:a元素，但是我不明白为什么我的方法行不通.我希望浏览器HTML渲染器能够启动并处理DOM树的那部分.

I expected the namespace for html and the html:a tag would result in a proper handling of the bar text. but what I get is that bar is not displayed. As suggested in an answer, I can use the svg:a element, but I don't understand why my approach does not work. I would expect the browser HTML renderer to kick in and handle that part of the DOM tree.

推荐答案

您要<a xlink:href="http://example.org/">.您也知道，这也是SVG元素.

You want <a xlink:href="http://example.org/">. It's an SVG element too, you see.

回复:XHTML链接.我相信一个更好的问题是，您为什么期望它起作用或需要它? SVG具有自己非常合适的链接元素，该链接元素得到了广泛的实现和良好的支持.

Re: XHTML link. I believe a better question is, why would you expect it to work, or need it to? SVG has its own perfectly suitable link element, which is widely implemented and well supported.

正如评论中所建议的，这与退出SVG渲染上下文有关；这种情况可能存在，也可能并非如此，这很可能是实现定义的行为问题.即使这样，也不应该认为它在将来的任何实现中都可行，特别是考虑到存在具有相同功能的本机标记的情况.

As has been suggested in a comment, it has to do with dropping out of an SVG rendering context; this may or may not be the case, more likely it's a matter implementation-defined behaviour. Even so, it shouldn't be thought of as likely to work in any future implementation, especially considering the presence of a native tag with identical functionality.

这篇关于SVG中的网页链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！