Блог

Главная - Вопросы по программированию - Создание SVG-текста с помощью javascript работает не так, как ожидалось

Создание SVG-текста с помощью javascript работает не так, как ожидалось

#javascript #svg

#javascript #svg

Вопрос:

У меня возникли проблемы с созданием текстового элемента SVG с помощью javascript. Проблема в том, что при изменении размера окна оно масштабируется не так, как должно.

Посмотрите на эту скрипку: 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>

Ответ №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>