Question

作为标题。但我使用翻译属性不是CSS。那么如何将translate值转换为像素。这是HTML代码：

<g transform="translate(95,-8)">...</g>

更新原因：为什么我需要转换为像素？因为加载后我需要我的网页，需要css做一些动画，动画需要遵循元素坐标。但div翻译需要单位，所以我需要将组翻译转换为某个特定单位，或者无论如何，当网络加载成功时，无论如何都可以计算该元素的宽度/高度。

这里提供了更多信息：

 <g transform="translate(95,-8)">
<pattern class="sNodes" id="image2" width="100%" height="100%" style="display: block;"><image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="images/1-01.png" id="node_id112" width="20px" height="20px"></image></pattern><circle r="10" class="sNodes" id="node_id112" onclick="NodesDownInlv3(112)" fill="url(#image2)" indicator="5-a-04-S03" original-title="" style="display: block;"></circle></g>

更新更多代码：

<svg class="enable" id="svg1" width="100%" height="100%">
<g transform="translate(-10,-11)">
<g transform="translate(817,379)"><pattern class="sNodes" id="image2" width="100%" height="100%" style="display: block;"><image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="images/1-01.png" id="node_id112" width="20px" height="20px"></image></pattern><circle r="10" class="sNodes" id="node_id112" onclick="NodesDownInlv3(112)" fill="url(#image2)" indicator="5-a-04-S03" style="display: block;" original-title=""></circle></g>
</g>
</svg>

<div id="doSomeInfo"></div> //when web was loading success this will show some information, the information will follow the svg's group

感谢您的帮助。

Answer 1

我会尝试为您提供指南，如果您能够提供更多详细信息，我可以编辑答案。

首先应计算SVG的长度并将其传递回SVG元素。

// access element you want to measure
var el = document.getElementsByTagName('yourtag')[i]; //you can use getElementById or class as well in her
el.getComputedTextLength(); // returns a pixel

Answer 2

首先，为什么需要将其转换为像素？

简单文字：

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">

    <text x="20" y="40">Example SVG text 1</text>
</svg>

如果您只关注字体大小和样式，请尝试使用

 <text x="20" y="40"
      style="fill: #000000; stroke: none; font-size: 48px;">
    Fill only
</text>
<text x="20" y="100"
      style="fill: none; stroke: #000000;  font-size: 48px;">
    Stroke only
</text>
<text x="20" y="150"
      style="fill: #999999; stroke: #000000;  font-size: 48px;">
    Fill and stroke
</text>

你在找别的东西吗？

Answer 3

您始终可以使用Element.getBoundingClientRect()。它产生元素相对于视口左上角的位置。所以如果您的结构是这样的：

<div class="container">
    <svg>
        <g transform="…">
        …
        </g>
    </svg>
    <div id="someid">…</div>
</div>

您可以从绑定Rect的组中减去.containers边界Rect，以获得从该组到容器的相对偏移量。

如何将SVG g元素转换转换值转换为像素

3 个答案: