3

SVG要素全体を埋めるSVG四角形の真ん中にSVGパスを表示しようとしています。これまでのところ、次のことを試しましたが、役に立ちませんでした

  1. パス要素を<g>タグに配置し、取得した値に基づいてグループを変換しますelementgetBBox()。これらの値と SVG ボックス全体の値を使用して、要素を縮小するための適切な数値を取得しようとしますが、それでも収まらず、中央にも配置されません
  2. #1 と同じことを行いますが、<svg>タグの代わりにネストされたタグを使用し<g>ます。
  3. 要素自体を変換しようとしました。

私が抱えている主な問題は次のとおりです。

  • パス要素を正方形に動的に合わせる方法が見つからないようです
  • 何らかの理由でパス要素が右にぶら下がっているようです。上面と左側面を揃えたい

私が使用しようとしている svg の jsfiddle があります。

4

3 に答える 3

2

方法 2 では、パスの境界が明らかでない場合 (相対パス コマンドを使用しているため、そうではありません)、適切な境界が見つかるまで viewBox を試してみてください。あなたの星の場合、それは (50,55 - 460,455) であることが判明しました。

<svg viewBox='0 0 350 200' height='200' width='350' xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <rect width="350" height="200" x="0" y="0" fill="#126d62"></rect>

    <svg  width="350" height="200" x="0" y="0" viewBox="50 55 410 400">
       <path id="star-2-outline" d="M256,128.858l42.98,88.667l97.61,13.478l-71.047,68.278l17.346,96.996L256,349.809l-86.89,46.469l17.346-96.996l-71.047-68.278l97.61-13.478L256,128.858z M256,60.082l-62.978,129.92L49.999,209.75L154.1,309.793l-25.415,142.125L256,383.828l127.315,68.09L357.9,309.793L462.001,209.75l-143.023-19.748L256,60.082z" class="flag-icon" ></path>
      </svg>

</svg>

http://jsfiddle.net/epTp9/4/

方法 3 の場合は、適切なスケールに資金を提供し、それを適切な場所に変換するだけです。

<svg viewBox='0 0 350 200' height='200' width='350' xmlns="http://www.w3.org/2000/svg" 
  xmlns:xlink="http://www.w3.org/1999/xlink">
    <rect width="350" height="200" x="0" y="0" fill="#126d62"></rect>

    <path id="star-2-outline" d="M256,128.858l42.98,88.667l97.61,13.478l-71.047,68.278l17.346,96.996L256,349.809l-86.89,46.469l17.346-96.996l-71.047-68.278l97.61-13.478L256,128.858z M256,60.082l-62.978,129.92L49.999,209.75L154.1,309.793l-25.415,142.125L256,383.828l127.315,68.09L357.9,309.793L462.001,209.75l-143.023-19.748L256,60.082z" class="flag-icon"
          transform="scale(0.5) translate(90 -55) "></path>

</svg>

http://jsfiddle.net/epTp9/5/

于 2013-11-01T06:45:52.727 に答える
2

ここに作業フィドルがあります

http://jsfiddle.net/epTp9/3/

これがパスの変更されたコードです。

<g transform="scale(0.4)">
<path id="star-2-outline" d="M256,128.858l42.98,88.667l97.61,13.478l-71.047,68.278l17.346,96.996L256,349.809l-86.89,46.469l17.346-96.996l-71.047-68.278l97.61-13.478L256,128.858z M256,60.082l-62.978,129.92L49.999,209.75L154.1,309.793l-25.415,142.125L256,383.828l127.315,68.09L357.9,309.793L462.001,209.75l-143.023-19.748L256,60.082z" class="flag-icon" ></path>

  </g>
于 2013-11-01T06:19:03.560 に答える
1

"rect" の id に合わせたい rect を指定すると、星が四角形に収まります。

var rectBBox = rect.getBBox();
var path = document.getElementById("star-2-outline");
var pathBBox = path.getBBox();

var scaleX = rectBBox.width / pathBBox.width;
var scaleY = rectBBox.height / pathBBox.height;
var translateX = rectBBox.x - pathBBox.x;
var translateY = rectBBox.y - pathBBox.y;

path.setAttribute("transform", "scale(" + scaleX + ", " + scaleY + ") translate(" + translateX + ", " + translateY + ")");
于 2013-11-01T07:09:06.793 に答える