我在使用javascript创建SVG文本元素时遇到问题。问题是,当窗口调整大小时,它不会像它应该缩放一样。
看看这个小提琴: https://jsfiddle.net/cduL72mf/2/
为什么javscript生成的" SVGtext 2"不像" SVGtext 1",我能看到输出完全相同?我错过了什么?
var xmlns = 'http://www.w3.org/2000/svg';
var svgelement = document.createElementNS(xmlns, 'svg');
svgelement.id='svg2';
svgelement.setAttribute('viewbox', '0 0 300 200');
document.body.appendChild(svgelement);
var svgtext = document.createElementNS(xmlns, 'text');
svgtext.id='text2';
svgtext.setAttribute('x', '56');
svgtext.setAttribute('y', '74');
svgtext.setAttribute('font-size', '33');
var textnode = document.createTextNode('SVGText 2');
svgtext.appendChild(textnode);
svgelement.appendChild(svgtext);

svg {
width: 100%;
height: 300px;
}

<svg id="svg1" viewbox="0 0 300 200">
<text id="text1" x="56" y="74" font-size="33">SVGText 1</text>
</svg>
&#13;
答案 0 :(得分:1)
viewbox
应为viewBox
。它区分大小写。
接受其他SVG(“svg1”)中的小写版本,因为HTML解析器更宽容。它会为您更正该属性名称。
var xmlns = 'http://www.w3.org/2000/svg';
var svgelement = document.createElementNS(xmlns, 'svg');
svgelement.id='svg2';
svgelement.setAttribute('viewBox', '0 0 300 200');
document.body.appendChild(svgelement);
var svgtext = document.createElementNS(xmlns, 'text');
svgtext.id='text2';
svgtext.setAttribute('x', '56');
svgtext.setAttribute('y', '74');
svgtext.setAttribute('font-size', '33');
var textnode = document.createTextNode('SVGText 2');
svgtext.appendChild(textnode);
svgelement.appendChild(svgtext);
svg {
width: 100%;
height: 300px;
}
<svg id="svg1" viewbox="0 0 300 200">
<text id="text1" x="56" y="74" font-size="33">SVGText 1</text>
</svg>