我有一个交互式SVG - 以全窗口大小显示。我想为它添加一些按钮。是否可以在<button>
代码中添加普通<svg>
元素?
我想不是,但我在问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按钮,任何好的按钮替换都没问题
答案 0 :(得分:10)
<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
事件处理程序,它也可以正常工作。
答案 1 :(得分:1)
您可以插入至少一个链接(然后像按钮一样设置样式)。我把与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>
答案 2 :(得分:0)
您可以向svg对象添加onclick属性,例如:
onclick =&#39; window.location =(&#34; http://...");&#39;
答案 3 :(得分:0)
您可以使用<foreignObject>
。 SVG允许在SVG内容的任何地方包含来自外部名称空间的元素。通常,SVG用户代理将在DOM中包含未知元素,否则将忽略未知元素。
foreignObject
答案 4 :(得分:-3)