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>の各ペアを roup タグで囲みます。<rect><text>
  3. <text>要素の残りの部分についてこれを繰り返します。
  4. 最初のタグが から始まり、2 番目のタグが から始まる場合など、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 の主な問題の 1 つは、自動テキスト ラップがないことです。それを回避する方法があります。

于 2013-05-01T02:56:08.173 に答える