SVG 文本路径元素在使用 Javascript 生成时在 Firefox 中呈现不正确
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 }
经过一些实验,我发现,要在 HTML 中声明时在 Firefox 中正确呈现 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 生成的文本路径?
这些错误是错误吗,我应该报告它们吗?
任何和所有的帮助将不胜感激,因为我的项目依赖于能够动态生成文本路径!
你写的是createElement("defs")
,而不是你在所有其他点上使用的createElementNS
。
相关文章:
- Jquery菜单操作不稳定,定位不正确,存在一般错误
- Amazon S3 REST API大小不正确
- Javascript Reg Exp不正确匹配
- DIV并排,位置不正确
- Firefox使用JQuery返回不正确的JSON
- Mediaelement.js setCurrentTime在Firefox和使用flash时设置的时间不正确
- 使用AngularJS循环访问JSON文件时出现“格式不正确”的Firefox错误
- Firefox不会“;正确地“;打开具有目标=“0”的链接_空白“;JavaScript在页面加载时添加的属性
- Firefox键盘事件的timeStamp值不正确
- 在Chrome和Firefox中正确完成远程表单,但不能在IE中完成
- Rails应用程序仅在Chrome上显示正确.对于Firefox和Safari,所有的样式加载都不正确
- SVG 文本路径元素在使用 Javascript 生成时在 Firefox 中呈现不正确
- Firefox在另存为类型-另存为对话框中的文件类型不正确
- 在Firefox和Opera中使用图像映射时,顶部偏移量返回不正确
- 为什么Javascript在Firefox中返回不正确?
- 为什么Mozilla Firefox不能处理正确的jQuery ?
- Dimple.js散点图在Firefox v.38.0.5中绘制不正确
- firefox中的Javascript加载不正确
- 为什么FireFox不总是选择正确的事件目标?(路径元素特定)
- firefox中的Google地图mouseevent显示不正确的坐标