< button> svg中的元素? [英] <button> element inside svg?

问题描述

我有一个交互式SVG-以全窗口大小显示.我想添加一些按钮.是否可以在<svg>标签内添加普通的<button>元素?
我认为不是，但我想问的是SVG是否有类似功能.
从某些绘图中，我得到如下不好的结果:
https://jsfiddle.net/pvxr6g8k/1/

I have an interactive SVG - displayed at full window size. I want to add some buttons to it. Is it possible to add normal <button> elements inside <svg> tag?
I think not, but I'm asking if there is something similar for SVG.
From some drawing I get bad results like this:
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绑定事件或与其交互.更不用说像这样很难实现按钮按下"的视觉点击效果.

The problem is not the visual appearance, but the structure, which not allow me to bind event or interact with it using JS. Not to mention the visual click effect of button "press" is harder to achieve like that.

那么交互式SVG中按钮的解决方案是什么? HTML中的按钮之类的好元素吗?

So what is the solution for buttons in interactive SVG? Any good element like button in HTML?

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

I don't have to embed html button, any good button replacement would be fine

推荐答案

<button>是HTML元素，因此不能(直接)进入SVG元素.

<button> is an HTML element, and therefore can't go (directly) in an SVG element.

但是，您可以考虑使用

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

只需确保使用xmlns:html="http://www.w3.org/1999/xhtml"

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

This works in most browsers. Internet Explorer doesn't support it, but Microsoft Edge does.

或者，您可以只绘制自己的类似按钮的<rect>并在其上附加一个click事件处理程序，也可以很好地工作.

Alternatively, you could just draw your own button-like <rect> and attach a click event handler to it, that'll work just fine too.

这篇关于< button> svg中的元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！