<button> svg 中的元素？

Answer 1

<button>

是一个 HTML 元素，因此不能（直接）进入 SVG 元素。

但是，您可以考虑使用

<foreignObject position attributes>
    <html:button>Button1</html:button>
</foreignObject>

只需确保正确声明名称空间，例如在根

<svg>

元素上，使用

xmlns:html="http://www.w3.org/1999/xhtml"

这适用于大多数浏览器。 Internet Explorer 不支持，但 Microsoft Edge 支持。

或者，您可以绘制自己的类似按钮

<rect>

并附加一个

click

事件处理程序，这样也可以正常工作。

Answer 2

您至少可以插入一个链接（然后将其样式设置为按钮）。我将 Illustrator 的链接放在 SVG 中。也许一个按钮也是可能的。但您可以在我们的网站上看到工作链接 http://www.kleinefische.com

在 svg 中它看起来像：

<a xlink:href="http://www.kleinefische.com" >
   <polygon fill="none" points="162,263.3 251.6,256 252.7,273.3 163,280.5"/>
   <text transform="matrix(0.9967 -8.087198e-02 8.087198e-02 0.9967 162.7812 272.6545)" 
    fill="#FFFFFF" font-family="'TradeGothicLT-Bold'" font-size="12.9937">
      /AGENTUR
   </text>
</a>

Answer 3

您可以使用

<foreignObject>

来实现这一点。 SVG 允许在 SVG 内容中包含来自任何地方的外部命名空间的元素。一般来说，SVG 用户代理将在 DOM 中包含未知元素，但会忽略未知元素。 外来对象

Answer 4

您可以向 svg 对象添加 onclick 属性，例如：

onclick='window.location =("http://...");'

Answer 5

你可以将 iframe 放在按钮内

<button><iframe></iframe></button>

button {
  display : block; /* or inline-block */
}
button iframe {
  pointer-events : none;
  position: relative;
  z-index : 0;
}

Answer 6

你可以尝试一下D3JS。

请参阅此处有关处理鼠标事件的文档：https://github.com/d3/d3-selection/blob/master/README.md#handling-events

举个例子：无法在D3 JavaScript库中获取点击事件