SVG文本

Question

考虑以下用于绘制FOOBAR单词的HTML5内联<svg>示例（省略属性）：

<svg>
  <text>
    <tspan>FOO</tspan>
    <tspan>BAR</tspan>
  </text>
</svg>

我想摆脱那些<tspan>，用<text>块替换它们，如下面的示例，同时保持相同的视觉方面（例如字母/音节间距）前：

<svg>
  <text>FOO</text>
  <text>BAR</text>
</svg>

（替代方式，如果需要）：

<svg>
  <g>
    <text>FOO</text>
    <text>BAR</text>
  </g>
</svg>

在这种情况下，如何计算<text>块的正确位置（使用Javascript）？

奖金问题：我如何在<text>内水平和垂直地将此<svg>组对中？

Answer 1

SVG文本

让文本显示在彼此旁边。
这很简单：
在文本元素上使用getComputedTextLength()获取文本的像素长度然后将第二个 text x属性设置为该像素长度。

document.addEventListener("DOMContentLoaded", function(event) {
  //SVG document 
  var svgElem = document.getElementById("doc");
  //The first text element
  var text1 = svgElem.getElementById("text1");
  //The second text element
  var text2 = svgElem.getElementById("text2");
  //Setting the second texts attribute to text length of the first text.
  text2.setAttribute("x", text1.getComputedTextLength());
});

svg {
  border: 1px solid black;
}
.show {
  display: inline-block;
  padding: 5px;
}

<div class="show">
  <h1>Javascript</h1>
  <svg id="doc" viewBox="0 0 100 100" width="150">
    <text id="text1" x="0" y="50" font-size="25">FOO</text>
    <text id="text2" y="50" font-size="25">BAR</text>
  </svg>
</div>
<div class="show">
  <h1>Tspan</h1>
  <svg viewBox="0 0 100 100" width="150">
    <text y="50" font-size="25">
      TSP<tspan>AN</tspan>
    </text>
  </svg>
</div>

加分问题？奖金是多少？无论如何如何居中。

没有viewBox属性的解决方案

document.addEventListener("DOMContentLoaded", function(event) {
  //SVG document 
  var svgElem = document.getElementById("doc");
  //The text element
  var text1 = svgElem.getElementById("text1");
  var svgSize = svgElem.getBoundingClientRect();
  //Computing text height
  var textHeight = (svgSize.height/2)+text1.getAttribute("font-size")/2;
  text1.setAttribute("y", textHeight);
  //Computing text width
  var textWidth = (svgSize.width/2)-text1.getComputedTextLength()/2;
  text1.setAttribute("x", textWidth);
  
});

svg {
  border: 1px solid black;
}
.show {
  display: inline-block;
  padding: 5px;
}

<div class="show">
  <h1>Javascript</h1>
  <svg id="doc" width="200" height="75">
    <text id="text1" x="0" y="0" font-size="20">FOOBAR</text>
  </svg>
</div>

使用viewBox属性

的解决方案

document.addEventListener("DOMContentLoaded", function(event) {
  //SVG document 
  var svgElem = document.getElementById("doc");
  //The text element
  var text1 = svgElem.getElementById("text1");
  //Gets the viewbox 4 properties [0, 0, 100 ,50]
  var svgVBox = svgElem.viewBox.baseVal;
  //Computing text height
  var textHeight = (svgVBox.height / 2) + (text1.getAttribute("font-size") / 2);
  text1.setAttribute("y", textHeight);
  //Computing text width
  var textWidth = (svgVBox.width / 2) - (text1.getComputedTextLength() / 2);
  text1.setAttribute("x", textWidth);
});

svg {
  border: 1px solid black;
}
.show {
  display: inline-block;
  padding: 5px;
}

<div class="show">
  <h1>Javascript</h1>
  <svg id="doc" viewBox="0 0 100 50" width="200px">
    <text id="text1" x="0" y="0" font-size="20">FOOBAR</text>
  </svg>
</div>

使用多个<text>元素而不是<tspan>元素拆分SVG字

1 个答案:

SVG文本