Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/html/80.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181

Warning: file_get_contents(/data/phpspider/zhask/data//catemap/1/visual-studio-2008/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
当使用Javascript生成SVG textpath元素时,Firefox中的SVG textpath元素呈现不正确_Javascript_Html_Firefox_Svg - Fatal编程技术网

当使用Javascript生成SVG textpath元素时,Firefox中的SVG textpath元素呈现不正确

当使用Javascript生成SVG textpath元素时,Firefox中的SVG textpath元素呈现不正确,javascript,html,firefox,svg,Javascript,Html,Firefox,Svg,以下代码在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/2

以下代码在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 }
经过一些实验后,我发现要在Firefox中正确呈现HTML中声明的textPath元素,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生成的文本路径

这些是错误,我应该报告它们吗


任何和所有的帮助将非常感谢,因为我的项目依赖于能够动态生成文本路径

您编写了createElementdefs,而不是您在所有其他点上使用的CreateElements。

对于文本路径是,对于已知问题的innerHTML是,我提交了错误。同时,我想我必须先找到一个解决办法来生成HTML。Alice发现了什么地方出错了createElementdefs应该是CreateElements。如果在修复之后又有一个bug,那么一定要引发另一个bug,而不是重新打开你已经引发的bug。发现得很好!真不敢相信我一直在为这事生气。非常感谢您的帮助!如果你把你的答案作为这个问题的答案,我会把它标记为正确答案。