svg 中的 <button> 元素？答案

【问题标题】：<button> element inside svg?svg 中的 <button> 元素？
【发布时间】：2017-02-16 11:46:51
【问题描述】：

我有一个交互式 SVG - 以全窗口大小显示。我想给它添加一些按钮。是否可以在<svg> 标签内添加普通的<button> 元素？
我不这么认为，但我想知道 SVG 是否有类似的东西。
从一些绘图中，我得到了这样的糟糕结果：
https://jsfiddle.net/pvxr6g8k/1/

<svg version="1.1" id="svg9723" height="768" width="1268">
<g style="fill:#e6e6e6" id="g3332-7" transform="matrix(0.27404175,0,0,-0.447665,86.580009,508.16151)">
      <g style="fill:#e6e6e6" clip-path="url(#clipPath3336-0-0)" id="g3334-7">
        <g style="fill:#e6e6e6" transform="translate(992.5469,164.3086)" id="g3340-6">
          <path inkscape:connector-curvature="0" id="path3342-2" style="fill:#e6e6e6;stroke:#241a5d;stroke-width:4.48957968;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none;stroke-opacity:1" d="m 0,0 c -6.937,0 -12.58,5.645 -12.58,12.58 l 0,63.277 c 0,6.937 5.643,12.581 12.58,12.581 l 279.488,0 c 6.936,0 12.58,-5.644 12.58,-12.581 l 0,-63.277 C 292.068,5.645 286.424,0 279.488,0 L 0,0 Z"></path>
        </g>
      </g>
    </g>
    <text transform="scale(0.9324557,1.072437)" id="text3390-1" style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:11.87269115px;font-family:'Times New Roman';-inkscape-font-specification:'Times New Roman, Bold';writing-mode:lr-tb;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none" x="413.18262" y="390.15326">
      <tspan style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-family:Arial;-inkscape-font-specification:'Arial Bold'" y="390.15326" x="413.18262" id="tspan3392-0" sodipodi:role="line">BUTTON</tspan>
    </text>
    </svg>

问题不是视觉外观，而是结构，它不允许我使用 JS 绑定事件或与之交互。更何况按钮“按下”的视觉点击效果更难实现。

那么交互式 SVG 中按钮的解决方案是什么？ HTML中有什么好的元素，比如按钮？

我不必嵌入 html 按钮，任何好的按钮替换都可以

【问题讨论】：

相关 - stackoverflow.com/questions/6538918/…
不要混合使用 html 标签和 svg 图形！

标签： javascript css button svg

【解决方案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 事件处理程序，这样也可以正常工作。

【讨论】：

这看起来不错。简单的问题 - 为什么 xmlns.is 很重要，浏览器是否已经不知道 html？它是否向这个 w3 页面发出请求？
如果您的 SVG 实际上嵌入在 HTML5 文档中，那么您不需要它，但如果它是一个独立的 SVG 文件，那么您需要指定命名空间，以便浏览器知道所有内容的来源。

【解决方案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>

【讨论】：

【解决方案3】：

您可以为此使用<foreignObject>。 SVG 允许在 SVG 内容的任何地方包含来自外部命名空间的元素。一般来说，SVG 用户代理会在 DOM 中包含未知元素，但会忽略未知元素。 foreignObject

【讨论】：

【解决方案4】：

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

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

【讨论】：

这适用于路径元素，但文本不在内部，因此不可点击

【解决方案5】：

你可以试试D3JS。

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

还有一个例子：Unable to get click event in D3 JavaScript library

【讨论】：