SVGグループの最大幅の設定方法

bugfix> svg > 投稿 2020-08-22 19:38

<g> にグループ化されたいくつかのSVG要素があります要素（正確にバーコード1D、PHPはバーコードを生成します）。

 <g
 style="fill:#000000;stroke:none"
 id="barcode1D"
 transform="matrix(1.2083333,0,0,0.8247805,62.027778,573.54235)">
<rect
   x="0"
   y="0"
   width="4"
   height="30"
   id="xyz" />

....

   <rect
   x="224"
   y="0"
   width="0"
   height="30"
   id="xyzn" /> </g>

バーコードはさまざまな幅と長さで生成されます。幅を永続的に設定するにはどうすればよいですか？

この例に基づいて、ヒントを求めています。よろしくお願いします。

svg

barcode

回答 1 件

SVG g 要素に width がありませんおよび height 属性。したがって、 height を設定できますおよび width それのための。

foreignObject を使用する必要がありますと svg そうするためにその中に。

<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg">
  <foreignObject id="G" width="300" height="200">
    <svg>
     <!-- Barcode here -->
     <rect fill="black" stroke-width="2" height="112" width="84" y="55" x="55" stroke="#000000"/>
     <circle fill="#FF0000" stroke="#000000" stroke-width="5"  cx="155" cy="65" id="svg_7" r="50"/>     
    </svg>
  </foreignObject>
</svg>

Trends

bugfix

SVGグループの最大幅の設定方法

svg

barcode

関連記事