Question

我想从里到外创建一个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？

Answer 1

我的风格是使用单个＆lt; svg＆gt;最简单的设置是： -

使用getbbox()定义每个<rect>周围的<text>（这是每个文本元素的边界框）
围绕每对<g>和<rect>包裹<text>个roup标记
对<text>元素的其余部分重复此操作
在每个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的一个主要问题是没有自动文本换行，有很多方法。

如何创建一个SVG，其中元素的位置相对于其他元素？

1 个答案: