1

我想从里到外创建一个SVG，即制作一个文本，在它周围画一个框，对另一个文本做同样的事情，对齐框，...

所以基本上，没有一个元素具有预定义的尺寸和位置。

<svg xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <svg x="50" y="50">
    <rect height="100" width="100" style="fill: #00cc00"/>
      <svg x="50" y="50"> <!-- y is missing the width substract -->
      <text y="8">text</text>
      </svg>
  </svg>
</svg>

第一种方法有一个问题，因为在某些时候某些 X/Y 可能会以负坐标结束，从而使对象被切割。

所以我尝试了 D3

<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="http://d3js.org/d3.v2.min.js?2.9.5"></script>
<script>
body = d3.select('body')
svg = body.append('svg')
text = svg.append('text').text('text')
                .attr('x', 0)
                .attr('y', 16)
delta = 25
W = parseInt(text.style("width")) + delta + "px"
H = parseInt(text.style("height")) + delta + "px"
X = parseInt(text.attr("x")) - delta / 2
Y = parseInt(text.attr("y")) - delta / 2 - parseInt(text.style('font-size')) / 2

rect = svg.append('rect')
            .attr('width', W)
            .attr('height', H)
            .attr('x', X)
            .attr('y', Y)
            .style('fill', 'none')
            .attr('stroke', 'black')

W = parseInt(rect.attr("width")) + delta + parseInt(rect.attr("x")) + "px"
H = parseInt(rect.attr("height")) + delta  + parseInt(rect.attr("y")) + "px"

svg.attr('height', H)
    .attr('width', W)
</script>

这有点工作，但文本不是很好地居中，并且实施起来相当繁重。

任何（轻量级）建议 - 有或没有 D3 ？

4

1 回答 1

0

我的风格是使用单个 <svg> 最简单的设置是：-

  1. 用于getbbox()定义<rect>每个<text>（这是每个文本元素的边界框）
  2. <g>在每对<rect>和周围包裹一个分组标签<text>
  3. <text>对元素的其余部分重复此操作。
  4. transform()在每个标签上使用<g>，如果第一个从 开始y = 0，第二个从 开始
    y = rect_#1_height + offset，依此类推

要访问本机 Javascript 中的元素，请使用以下内容：-

var svgdoc = document.getElementsByTagName('svg')[0] «- svg docs
var textArray = svgdoc.document.getElementsByTagName('g') «- 返回数组
textArray[10] «- 第 10 个元素

SVG 最令人头疼的问题之一是没有自动文本换行，有很多方法可以绕过它。

于 2013-05-01T02:56:08.173 回答