logo标签列表

SVG 内的 <button> 元素？

javascriptcssbuttonsvg
14

我有一个交互式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按钮，任何良好的替代按钮都可以。

1
相关 - https://dev59.com/e2w15IYBdhLWcg3wi8dv - Paulie_D
不要混合使用HTML标签和SVG图形！ - 3rdthemagical
5个回答
17

<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事件处理程序附加到它上面，这也可以正常工作。

2
那看起来不错。简单的问题 - xmlns.is为什么重要，浏览器不已经知道HTML了吗？它会向w3页面发出请求吗？ - user3599803
1
如果您的SVG实际上嵌入在HTML5文档中，则不需要指定名称空间，但是如果它是一个独立的SVG文件，则需要指定名称空间，以便浏览器知道所有元素的来源。 - Niet the Dark Absol
3

您可以插入至少一个链接（并在之后像按钮一样进行样式设置）。我在SVG中使用Illustrator放置了链接。可能还可以制作按钮。但是您可以在我们的网站上查看有效链接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>
1

你可以使用<foreignObject>来实现。SVG允许在SVG内容中的任何位置包含来自外部命名空间的元素。通常情况下，SVG用户代理将把未知元素包含在DOM中，但会忽略其他未知元素。 foreignObject

0
你可以在你的SVG对象上添加一个onclick属性，类似于：
onclick='window.location =("http://...");'
这适用于路径元素，但文本不在其中，因此无法单击。 - user3599803
-7
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接