[英]SVG textpath element renders incorrectly in Firefox when generated using Javascript
以下代码在Chrome,IE11和Opera中可以正常显示,但在Firefox的左上角显示文本:
var svgNS = "http://www.w3.org/2000/svg";
var xlinkNS = "http://www.w3.org/1999/xlink";
var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttributeNS("http://www.w3.org/2000/xmlns/", "xmlns:xlink", "http://www.w3.org/1999/xlink");
svg.setAttributeNS(null, "viewBox", "0 0 1000 1000");
svg.id = "clockSVG";
document.body.appendChild(svg);
var defs = document.createElement('defs');
defs.id = "defs";
svg.appendChild(defs);
var path = document.createElementNS(svgNS,"path");
path.setAttribute("d","M75,20 l100,0 l100,30 q0,100 150,100");
path.setAttribute("id","myTextPath2");
defs.appendChild(path);
var text = document.createElementNS(svgNS,"text");
text.setAttribute("x","10");
text.setAttribute("y","100");
text.setAttribute("fill","black");
svg.appendChild(text);
var textPath = document.createElementNS(svgNS,"textPath");
textPath.setAttributeNS(xlinkNS, "xlink:href", "#myTextPath2");
textPath.textContent = "Text along a more advanced path with lines and curves.";
text.appendChild(textPath);
svg.appendChild(text);
如果我调用text.getBBox(),它表明它拥抱了屏幕的左边缘,并以某种方式接收到负y值:
SVGRect { x: 0, y: -14.825797080993652, width: 355.164306640625, height: 18.532245635986328 }
经过一些实验,我发现要使textPath元素在HTML中声明时在Firefox中正确呈现,textPath元素的内容必须与标记在同一行。
这将呈现一个奇怪的偏移量:
<text x="10" y="100" style="stroke: #000000;">
<textPath xlink:href="#myTextPath2">
Text along a more advanced path with lines and curves.
</textPath>
</text>
这将正确呈现:
<text x="10" y="100" style="stroke: #000000;">
<textPath xlink:href="#myTextPath2">Text along a more advanced path with lines and curves.</textPath>
</text>
(但是,如果文本的x和y属性设置为0或留为空白,则它将正确呈现)
因此,我尝试将必要的HTML构造为单行字符串并将其插入:
var textPathString = '<textPath xlink:href="#myTextPath2">Text along a more advanced path with lines and curves.</textPath>';
text.innerHTML = textPathString;
不幸的是,这并不能渲染任何东西(在Chrome中也不起作用)。
如何确保Firefox正确显示JavaScript生成的文本路径?
是这些错误,我应该报告它们吗?
由于我的项目依赖于能够动态生成文本路径,因此将不胜感激任何帮助。
您已经编写了createElement("defs")
而不是您在所有其他地方使用过的createElementNS
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.