[英]HTML Button inside SVG document
I have following problem I want to dynamically create HTML buttons inside SVG document.我有以下问题我想在 SVG 文档中动态创建 HTML 按钮。 At first I look over the SVG document, find apropriate reactangle and replace rectangle with <foreignObject>
element.首先我查看 SVG 文档,找到合适的 reactangle 并用<foreignObject>
元素替换矩形。 I am able to generate following SVG我能够生成以下 SVG
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
version="1.1"
width="100%"
height="100%"
viewBox="0 0 93.875076 43.283451"
id="svg20755"
xml:space="preserve">
<g id="Button-1" transform="translate(0.5000775,0.50220189)">
<foreignObject xmlns="http://www.w3.org/2000/svg" x="0" y="0" width="93" height="43">
<body xmlns="http://www.w3.org/1999/xhtml" style="margin: 0px; height: 100%;">
<button type="button" style="width:100%; height:100%;" onclick="alert('Button clicked')">
Juhuhuhu!
</button>
</body>
</foreignObject>
</g>
</svg>
This is the snippet how I create the element这是我如何创建元素的片段
var ns_HTML = 'http://www.w3.org/1999/xhtml';
var ns_SVG = REX.HELPERS.ns_svg;
var element = <Some code to load an SVG element>
var foreignObject = document.createElementNS(ns_SVG, 'foreignObject');
var body = document.createElementNS(ns_HTML, 'body');
body.setAttribute('xmlns', 'http://www.w3.org/1999/xhtml'); // FF
body.style.margin = '0px';
body.style.height = '100%';
var button = document.createElementNS(ns_HTML, 'button');
button.setAttribute('type','button');
button.setAttribute('style','width:100%; height:100%;');
button.innerHTML = 'Test!';
body.appendChild(button);
foreignObject.appendChild(body);
I have two problems especially in Chrome Browser:我有两个问题,尤其是在 Chrome 浏览器中:
<body>
did not fill the height of the <foreignObject>
元素<body>
没有填充<foreignObject>
的高度button
did not behave as a button (no reaction on mouseover and mousedown)
button
行为不像按钮(鼠标悬停和鼠标按下时没有反应)
I don't know why you say <body>
element doesn't fill the height of <foreignObject>
!?我不知道你为什么说<body>
元素没有填充<foreignObject>
的高度!?
When I try now in 2020, I see only a button in midlle on screen.当我现在在 2020 年尝试时,我在屏幕上只看到中间有一个按钮。
I have added a SVG <rect>
element with same size (width and height) than <foreignObject>
to have the possibility to compare these 2 objects.我添加了一个与<foreignObject>
具有相同大小(宽度和高度)的 SVG <rect>
元素,以便比较这两个对象。
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns="http://www.w3.org/2000/svg"
version="2.0"
width="100%"
height="100%"
viewBox="0 0 90 50"
>
<g transform="translate(1 0)">
<foreignObject xmlns="http://www.w3.org/2000/svg" x="0" y="0" width="80" height="20">
<body xmlns="http://www.w3.org/1999/xhtml" style="margin:0px; height:100%;">
<button type="button" style="width:100%; height:100%;" onclick="alert('Button clicked')">
Juhuhuhu!
</button>
</body>
</foreignObject>
<rect x="0" y="25" width="80" height="20" stroke="orange" stroke-width="2" fill="white"/>
</g>
As you can see, they have same size !如您所见,它们的大小相同!
I put an image to proove what I say because it is possible that in 1 year what I have written is false !我放了一张图片来证明我所说的话,因为我所写的可能在 1 年内是假的!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.