web-dev-qa-db-ja.com

SVGドキュメント内のオブジェクトを整列する方法は？

グループまたはドキュメントの右端を基準にして、SVGでオブジェクト（たとえば、四角形）を配置する方法はありますか？ドキュメント全体の幅を広げるときにオブジェクトのサイズを維持したいのですが、X位置を増やして右揃えにします。

よろしく、

svgalignment
33
noober

Width = 100％のsvgファイルの右側に<g>要素をフロートする方法を探していました。したがって、画像を拡大縮小することができ、私の<g>要素は拡大縮小せずに右側に固定されます。

ここに私が見つけたものがあります：

<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" 
    xmlns:ev="http://www.w3.org/2001/xml-events" 
    version="1.1" 
    baseProfile="full" 
    width="100%" 
    height="100%"> 

    <svg viewBox="0 0 300 300" width="100%" height="300px" 
        preserveAspectRatio="xMaxYMin meet"> 
        <g transform="skewX(45)" style="fill:red;">
            <rect x="0" y="0" height="100%" width="20px" /> 
            <rect x="270" y="0" height="100%" width="20px" /> 
        </g> 
    </svg> 
</svg>

トリックは、<svg>タグを使用することです。このタグは、要素を配置する場所で、右の境界に貼り付けます。次に、<svg>タグに、内部要素をスケーリングせずに移動し、x値が最大でyが最小になるように指示します（xMaxYMin）

preserveAspectRatio="xMaxYMin meet"

同じように、あなたはそれを中央に置くことができます...

ソース： http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute

40
kulpae

私は同じ質問を持っていて、最初はクルパエの答えが好きでした。しかし、私にとっての問題は、左にスクロールするための左揃えのボタンと右にスクロールするための右揃えのボタン、およびkulpaeのこの例では、スクローラーの幅全体を使用するため、スクローラーのコンテンツがクリックイベントを受け取れないようにします。

私の解決策は、ボタンに負のx位置要素を持つ100％x位置にネストされたsvg要素を使用しました：

<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg id="mainSvg" xmlns="http://www.w3.org/2000/svg" version="1.1"
    width="100%" height="100%"
    xmlns:xlink="http://www.w3.org/1999/xlink">

    <svg id="rightAlign" x="100%" y="0" width="0" height="200" style="overflow: visible;">
        <rect id="rightBtn" width="50" height="200" x="-50" y="0" fill="#ff0000"></rect>
    </svg>
    <svg id="leftAlign" x="0" y="0" width="0" height="200" style="overflow: visible;">
        <rect id="leftBtn" width="50" height="200" x="0" y="0" fill="#ff0000"></rect>
    </svg>
</svg>
12
Shabs

ネクロマンシング。
preserveAspectRatio のさまざまな調整：

左上

preserveAspectRatio="xMinYMin meet"

右上：

preserveAspectRatio="xMaxYMin meet"

左下

preserveAspectRatio="xMinYMax meet"

右下

preserveAspectRatio="xMaxYMax meet"

例：

<svg xmlns="http://www.w3.org/2000/svg" 
     viewBox="0 0 2560 1600" preserveAspectRatio="xMaxYMin meet">
10
Stefan Steiger