svg.js - 如何从 SVG 文本元素中获取 X 位置答案

【问题标题】：svg.js - How to get X position from SVG text elementsvg.js - 如何从 SVG 文本元素中获取 X 位置
【发布时间】：2019-08-13 13:42:51
【问题描述】：

我想使用 svg.js 从 SVG 内的文本元素中获取位置，但我总是得到 0。位置应该相对于 svg 元素，之后我会在该文本上放置另一个元素。

window.onload=function(){
    let mapa = SVG('#map').size('100%', '100%');

    let txtText = SVG("#elements text").text();
    let posX = SVG("#elements text").x();
    let posVal = SVG("#elements text").has($(this).text() == "Messi");

    $(".results").html("Text " + txtText + " position X is: " + posX);

}

body {
  font-family: "Calibri";
}
.results {
    width: 100%;
    text-align: center;
    font-size: 1.4rem;
    margin: 5vh 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/3.0.12/svg.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="results">asd</div>
<svg version="1.1" id="map" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 553 492" enable-background="new 0 0 553 492" xml:space="preserve">
  <g id="elements">
    <rect x="12" y="17" fill="#006633" width="525" height="462"/>
    <path fill="#339933" d="M495,130c-2,68.4,26,142-51,211s-116,131-244,63S-39,373,77,237S140,96,252,69s173-53,220-22S497,63,495,130
      z"/>
    <text transform="matrix(1 0 0 1 210.7305 325.9219)" fill="#FFFFFF" font-size="80px">Messi</text>
  </g>
</svg>

谢谢

【问题讨论】：

标签： javascript html css svg svg.js

【解决方案1】：

由于位置是由转换设置的，因此您必须从转换信息中获取它，如下所示：

window.onload=function(){
    let mapa = SVG('#map').size('100%', '100%');

    let txtText = SVG("#elements text").text();
    let posVal = SVG("#elements text").has($(this).text() == "Messi");
    let posX = SVG("#elements text").transform().translateX*SVG("#elements text").transform().scaleX;

    $(".results").html("Text " + txtText + " position X is: " + posX);

}

body {
  font-family: "Calibri";
}
.results {
    width: 100%;
    text-align: center;
    font-size: 1.4rem;
    margin: 5vh 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/3.0.12/svg.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="results">asd</div>
<svg version="1.1" id="map" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 553 492" enable-background="new 0 0 553 492" xml:space="preserve">
  <g id="elements">
    <rect x="12" y="17" fill="#006633" width="525" height="462"/>
    <path fill="#339933" d="M495,130c-2,68.4,26,142-51,211s-116,131-244,63S-39,373,77,237S140,96,252,69s173-53,220-22S497,63,495,130
      z"/>
    <text transform="matrix(1 0 0 1 210.7305 325.9219)" fill="#FFFFFF" font-size="80px">Messi</text>
  </g>
</svg>

【讨论】：

【解决方案2】：

或者，您可以使用text.rbox(svg) 在文本的视觉表示周围获得一个相对于svg 的边界框。使用box.x，您可以获得所需的价值

【讨论】：

这个选项更适合我，谢谢！