javascript < button>SVG中的元素？

l2osamch 于 2023-11-15 发布在 Java

关注(0)|答案(6)|浏览(110)

我有一个交互式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按钮，任何好的按钮替换将是罚款

JavaScript

来源：https://stackoverflow.com/questions/39917883/button-element-inside-svg

6条答案

按热度按时间

tmb3ates1#

<button>是一个HTML元素，因此不能（直接）进入SVG元素。
但是，您可以考虑使用

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

字符串
只要确保正确地声明了名称空间，例如在根<svg>元素上，使用xmlns:html="http://www.w3.org/1999/xhtml"
这适用于大多数浏览器。Internet Explorer不支持它，但微软Edge支持。
或者，您可以绘制自己的按钮状<rect>并将click事件处理程序附加到它，这也可以正常工作。

赞(0）回复(0）举报 2023-11-15

bmvo0sr52#

你可以插入至少一个链接（和样式后，它像一个按钮）。我把与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>

字符串

赞(0）回复(0）举报 2023-11-15

dgtucam13#

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

赞(0）回复(0）举报 2023-11-15

zour9fqk4#

你可以在svg对象中添加一个onclick属性，类似于：
onclick='window.location =（“http：//...”）;'

赞(0）回复(0）举报 2023-11-15

pqwbnv8z5#

你可以把iframe放在按钮里面

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

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

字符串

赞(0）回复(0）举报 2023-11-15

5cnsuln76#

你可以试试D3JS。
有关处理鼠标事件的文档，请参阅：https://github.com/d3/d3-selection/blob/master/README.md#handling-events
例如：Unable to get click event in D3 JavaScript library

赞(0）回复(0）举报 2023-11-15

我来回答

javascript < button>SVG中的元素？

6条答案

相关问题

热门标签

最新问答