Question

我在使用javascript创建SVG文本元素时遇到问题。问题是，当窗口调整大小时，它不会像它应该缩放一样。

看看这个小提琴： https://jsfiddle.net/cduL72mf/2/

为什么javscript生成的＆＃34; SVGtext 2＆＃34;不像＆＃34; SVGtext 1＆＃34;，我能看到输出完全相同？我错过了什么？

＆＃13;

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);

＆＃13;

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

＆＃13;

<svg id="svg1" viewbox="0 0 300 200">
  <text id="text1" x="56" y="74" font-size="33">SVGText 1</text>
</svg>

＆＃13;

Answer 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>

使用javascript创建SVG文本无法按预期工作

1 个答案: