【发布时间】：2021-11-20 20:16:02
【问题描述】：
我正在开发一个用于显示一些警报的 Web 项目，并且此代码会生成一个这样的警报，但是作为 div 中的外来对象的警报主体在 Firefox 中不可见，但在 chrome 中。
<svg id="mainCube" preserveAspectRatio="xMidYMid" viewBox="-240 -15 1000 700" version="1.1">
.....
<g id="cube2_E">
<rect x="350" y="0" rx="5" ry="3" width="230" height="20" fill="#fb5858"></rect>
<rect x="350" y="23" rx="5" width="230" height="90" fill="#cccccc"></rect>
<image x="355" y="35" style="width:80px; height:60px; filter: grayscale(100%);" xlink:href="someimage.png"></image>
<text text-anchor="start" x="354" y="15" class="txt_ti_E">TEST TITLE</text>
@*<text text-anchor="start" x="445" y="40" class="txt_alarm_text" >TESTer TEXT super long bunch of info hello how are you this should not fit</text>*@
<foreignobject width="135" height="95" transform="translate(445,30)" >
<div>
TESTer TEXT super long bunch of info hello how are you this should not fit
</div>
</foreignobject>
<line x1="440" y1="23" x2="440" y2="120" style="stroke:rgb(0, 0, 0); stroke-width:2" />
</g>
.......
</svg>
警报的主体是一个外来对象，因为它包含的文本总是会超出应该显示它的灰色矩形的边界。因此 tspan 不是一个选项，因为它需要计算文本并将其拆分为多行
我尝试将 svg 标记（视图框属性）中的代码切换为 width="100%" 和 height="100%" 但这不起作用，即使它是导致它无法工作的原因w3school 的 tryit 编辑器，我用下面的代码进行了测试，它确实在 firefox 中正确显示。
<!DOCTYPE html>
<html>
<body>
<svg height="100%" width="100%" version="1.1">
<text x="0" y="15" fill="red">I love SVG!</text>
Sorry, your browser does not support inline SVG.
<foreignobject width="135" height="95" >
<div>
TESTer TEXT super long bunch of info hello how are you this should not fit
</div>
</foreignobject>
</svg>
</body>
</html>
警报在使用此 javascript 的 2 个相似对象之间交替
setInterval(function () {
anim1();
setTimeout(function () { anim2(); }, 10000);
//setTimeout(anim3(), 20000);
}, 20000);
function calRotE1(rot) {
$("#cube1_E").css({ "transform": "translate(0px,10px) rotateY(" + rot + "deg)", "opacity": "0", "visibility": "hidden" });
$("#cube2_E").css({ "transform": "translate(0px,10px) rotateY(0deg)", "visibility": "visible" });
}
function anim1() {
calcRotation1(90);
calRotE1(180);
};
function anim2() {
calcRotation2(0);
calRotE2(0);
};
function calRotE2(rot) {
$("#cube1_E").css({ "transform": "translate(0px,10px) rotateY(" + rot + "deg)", "opacity": "1", "visibility": "visible" });
$("#cube2_E").css({ "transform": "translate(0px,10px) rotateY(180deg)", "visibility": "hidden" });
}
这里是闹钟的“A”面
<g id="cube1_E">
<rect x="350" y="0" rx="5" ry="3" width="230" height="20" fill="#fb5858"></rect>
<rect x="350" y="23" rx="5" width="230" height="90" fill="#cccccc"></rect>
<image x="355" y="35" style="width:80px; height:60px; filter: grayscale(100%);" xlink:href="imageA.png"></image>
<text text-anchor="start" x="354" y="15" class="txt_ti_E">Title A</text>
<foreignobject width="135" height="95" transform="translate(440,30)">
<div>
Body A
</div>
</foreignobject>
<line x1="440" y1="23" x2="440" y2="120" style="stroke:rgb(0, 0, 0); stroke-width:2" />
</g>
我什至在 tryit 编辑器中测试了整个代码块，它确实显示正确。我只是无法解释为什么它在 chrome 中都能正常工作，但在 firefox 中却不行
<svg id="mainCube" preserveAspectRatio="xMidYMid" viewBox="-240 -15 1000 700" version="1.1">
<g id="cube2_E">
<rect x="350" y="0" rx="5" ry="3" width="230" height="20" fill="#fb5858"></rect>
<rect x="350" y="23" rx="5" width="230" height="90" fill="#cccccc"></rect>
<image x="355" y="35" style="width:80px; height:60px; filter: grayscale(100%);" xlink:href="someimage.png"></image>
<text text-anchor="start" x="354" y="15" class="txt_ti_E">TEST TITLE</text>
<foreignobject width="135" height="95" transform="translate(445,30)" >
<div>
TESTer TEXT super long bunch of info hello how are you this should not fit
</div>
</foreignobject>
<line x1="440" y1="23" x2="440" y2="120" style="stroke:rgb(0, 0, 0); stroke-width:2" />
</g>
</svg>
【问题讨论】：
-
标签是foreignObject，不是foreignobject。
-
你还需要给 div 一个命名空间，即 xmlns="w3.org/1999/xhtml"
标签： javascript html svg