Question

我将通过SVG在路径上放置一些Text。可以通过输入（文本）元素将文本插入到网站上在JQuery中创建SVG后，我将其放入DIV中在IE和Chrome中它可以工作，这意味着文本在路径上正确显示但是在Firefox中，它是开箱即用的，并且在路径上没有正确显示。

<svg id="svgtext_o" height="100%" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
   <defs> <path id="textpfadtext_o" d="m 20,93 a 56,84 0 0 1 112,0">
   </defs>
   <desc>SVG Gruest fuer die Darstellung!</desc>
   <g>
     <text id="texttext_o" transform="" letter-spacing="60px">
       <textPath style="fill:none;stroke:#B3B3B3;stroke-width:0.833;stroke-miterlimit:4;stroke-opacity:1" xlink:href="#textpfadtext_o"> <tspan id="tspantext_o" class="BankGothic" fontsize="10" fill="#B3B3B3" stroke="#B3B3B3">jjjj</tspan>
       </textPath>
     </text>
   </g>
</svg>

什么错了？有什么建议吗？

奇怪的是，如果将其复制到一个额外的文件并通过Firefox打开此文件然后它会正确显示SVG！？！为什么不在Div？

这是请求的JQuery代码：

function setSVG(kopf_text_path, kopf_text_svg_max_length, fontselect, fontsizeselect, txtInput, element_sequel, transform_text) {
var svg_header = "<svg id='svg_" + element_sequel +"' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><title>SVG Head Text</title><desc>SVG Gruest fuer die Darstellung von Ringkopftexten!</desc>";
var sInnerHTML = '<path id="textpfad_" + element_sequel +" d="' + kopf_text_path + '" fill="none" /> <text textLength="' + kopf_text_svg_max_length + '" lengthAdjust="spacing" ' + ' transform="' + transform_text + '" ><textPath xlink:href="#textpfad" ><tspan class="' + $(fontselect + ' option:selected').val() + '" style="stroke:#B3B3B3; fill:#B3B3B3; font-size:' + $(fontsizeselect + ' option:selected').val() + 'px">' + $(txtInput).val() + '</tspan></textPath></text>';
$(".div_head_" + element_sequel).empty().append(svg_header + sInnerHTML + "</svg>");

}; 如果有人按下输入文本框中的某个键，则每次执行此操作。

THX

动态SVG文本未在Firefox中运行

0 个答案: