Как узнать положение и ширину элемента tspan

Question

Как узнать положение и ширину элемента tspan

0

Я работаю с d3js, где lib создает узлы и ссылки в соответствии с данными. В каком-то месте есть определенное требование добавить несколько текстов в одну строку, например url "www.xyz.com/home/user" (здесь 3 строки "www.xyz.com", "/home", "/user"). Они не являются отдельными узлами, поэтому я не могу найти позицию с d3. Это всего лишь элемент <text> с 3 <tspan> детьми.

<text id="TaxFilingResource_URL" class="label url" dy="24" dx="30">
  <tspan id="TaxFilingResource.URL.1">www.xyz.com</tspan>
  <tspan id="TaxFilingResource.URL.2">/home</tspan>
  <tspan id="TaxFilingResource.URL.3">/user</tspan>
</text>

и показано ниже

  www.xyz.com/home/user

Мне нужно получить положение и ширину каждого элемента <tspan>. Мой код

var el = document.getElementById(d.source);
x = el.getStartPositionOfChar('').x   (or)
x = el.getClientRects().left;

которые дают относительную позицию в тексте внутри g-элемента, но в каком-то браузере и на mac он вернет абсолютную позицию.

Есть ли правильный способ найти местоположение и ширину tspan в JavaScript, который работал со всеми браузерами (IE должен> 9-й версии).

Amit Rana 06 март 2014, в 09:57

Источник

0

Этот вопрос и этот вопрос должны помочь.
Lars Kotthoff 06 март 2014, в 09:26

Теги:

javascript

html

d3.js

svg

1 ответ

Ещё вопросы

Этот вопрос и этот вопрос должны помочь.

Erik Dahlström · Answer 1 · 2014-03-06T07-05-00.000Z

В SVG 1.1 tspan не имеет метода getBBox, но в SVG2 он делает, я сообщил о хромовой ошибке, сообщающей о неправильном значении, http://code.google.com/p/chromium/issues/detail? id = 349835.

Это даст вам правильное положение и размеры, если браузеры реализованы SVG2:

var bbox = document.getElementById("TaxFilingResource.URL.2").getBBox();

См. Jsfiddle для полного примера.

На данный момент вы можете сделать обходной путь, используя методы, доступные в SVG 1.1:

var home = document.getElementById("TaxFilingResource.URL.2");
var extent = home.getExtentOfChar(0); // pos+dimensions of the first glyph
var width = home.getComputedTextLength(); // width of the tspan
var rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
rect.x.baseVal.value = extent.x;
rect.y.baseVal.value = extent.y;
rect.width.baseVal.value = width;
rect.height.baseVal.value = extent.height;

См. Jsfiddle.

Если вам нужно преобразовать в другое место в дереве:

var dest = document.getElementById("dest"); // some arbitrary container element
var fromHometoDestmatrix = home.getTransformToElement(dest);
rect.transform.baseVal.appendItem(
  rect.transform.baseVal.createSVGTransformFromMatrix(fromHometoDestmatrix));
dest.appendChild(rect);

См. Jsfiddle.

Я забыл упомянуть, что узел d3js находится внутри элемента <g>, поэтому существует проблема с относительными и абсолютными точками
Во всяком случае, я выясняю это с помощью математического уравнения на данный момент ...
спасибо за это, но это, кажется, не объясняет dy и не обеспечивает плотную коробку вокруг tspan? есть ли способ сделать это, ты знаешь?