Chapter 9 - 3 : Transform attribute (negative scale)SVG

transform 属性の、scale のプロパティ値がマイナスになった場合、オブジェクトはミラーリング(mirroring)します。Chapter 9 の今回のセクションでは、これにrotate, translate などをミックスさせた位置関係を説明します。

transform = "translate(tx [ ty]) rotate(angle [cx cy]) scale(sx [sy]) skewX(angle) skewY(angle)" transform = "matrix(a, b, c, d, e, f)" --->matrix(a, b, c, d, e, f, 0, 0, 1) transform = "translate(tx, ty)" ---> transform = "matrix(1, 0, tx, d, 1, ty)" transform = "rotate(angle)" ---> transform = "matrix(cos α, -sin α, 0, sin α, cos α, 0)" transform = "scale(sx, sy)" ---> transform = "matrix(sx, 0, 0, 0, sy, 0)"

W3Cで標準化されている要素、スタイル属性がサポートされているブラウザ、またはSVG Viewerプラグインをインストールしてください。

左上のある#cup は、rotate(15) へ回転させた位置です。
rotate(15) scale(-1, 1) の位置は、X軸がマイナスの位置に表示されます。
rotate(15) scale(-1, 1) translate(-370, 0) の位置が右上2番目のオブジェクトです。この場合、translate(-370, 0) のマイナス370の方向は、scale(-1, 1) でX軸に反転してますので、逆の方向になります。これは、matrix 換算時にこうならなければいけないためです。
簡単に言うと、一旦scale(-1, 0)でX軸に反転させてますので、オブジェクトのカップの黒い取っ手のある方向がX軸にプラスの方向になります。もしscale が最後に設定されるのであれば関係ありません。また、transform での位置設定が終われば関係ありません。

●の位置は、x=650, y=250 の位置にあります。scale(-sx, -sy)の位置はその●にクロスしている青線の反対側に反転された位置になります。

基準となるオブジェクトの位置を、X=0, Y=0 の位置に設定すればその分簡単になります。

<g id="cup" stroke="black" stroke-linejoin="round" > <rect id="handle" width="35" height="50" x="140" y="50" rx="7" ry="30" style="fill:none;stroke:#002222;stroke-width:10" /> <rect x="50" y="20" width="100" height="150" rx="8" ry="8" fill="url(#shade1)" /> <rect x="48" y="19" width="104" height="5" fill="url(#shade1)" /> </g>

今回の#cup のx, y のオリジナルの位置は移動しています。前回までの#cup のrect 要素の左上(x, y) は指定していないので、x="0" y="0" でした。今回は、x="140" y="50" となっています。

色の名称はこちらを参考：Name, Hex, RGB of Color

下のコードは上のSVGファイルのコードです。

<?xml version="1.0" encoding="UTF-8" standalone="no"?> <!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:xhtml="http://www.w3.org/1999/xhtml" width="100%" height="100%"> <desc>rotate and negative scale property</desc> <title>rotate and scale property</title> <style type="text/css"> <![CDATA[ .arrow {stroke:red;stroke-width:2.5; marker-end:url(#end_red); } .style1 {stroke:black;stroke-width:1.5mm;} .txt {font-family:Impact; /*Arial;*/ font-size:14; } ]]> </style> <defs> <g id="grid"> <line x1="0" y1="300" x2="850" y2="300" fill="none" stroke-width="600" stroke="Gainsboro" stroke-dasharray="0.5 9.5" /> <line x1="425" y1="0" x2="425" y2="600" fill="none" stroke-width="850" stroke="Gainsboro" stroke-dasharray="0.5 9.5" /> </g> <marker id="start" viewBox="0 -10 20 20" markerUnits="userSpaceOnUse" refX="0" refY="0" markerWidth="20" markerHeight="20" orient="auto"> <polygon points="0,0 20,-6 16,0 20,6" stroke="black" /> </marker> <marker id="end" viewBox="-20 -10 20 20" markerUnits="userSpaceOnUse" refX="0" refY="0" markerWidth="20" markerHeight="20" orient="auto"> <polygon points="0,0 -20,-6 -16,0 -20,6" stroke="black" /> </marker> <marker id="end_red" viewBox="-20 -10 20 20" markerUnits="userSpaceOnUse" refX="0" refY="0" markerWidth="20" markerHeight="20" orient="auto"> <polygon points="0,0 -20,-6 -16,0 -20,6" fill="red" stroke="red" /> </marker> <linearGradient id="shade1" x2="50%" y2="0%" spreadMethod="reflect"> <stop offset="0%" stop-color="darkslategray"/> <stop offset="100%" stop-color="white"/> </linearGradient> <g id="cup" stroke="black" stroke-linejoin="round" > <rect id="handle" width="35" height="50" x="140" y="50" rx="7" ry="30" style="fill:none;stroke:#002222;stroke-width:10" /> <rect x="50" y="20" width="100" height="150" rx="8" ry="8" fill="url(#shade1)" /> <rect x="48" y="19" width="104" height="5" fill="url(#shade1)" /> </g> </defs> <!-- grids //--> <use xlink:href="#grid" /> <!-- cup //--> <g class="arrow"> </g> <use xlink:href="#cup" transform="rotate(15)"/> <use xlink:href="#cup" transform="scale(-1,1)"/> <use xlink:href="#cup" transform="rotate(15) scale(-1,1) translate(-370,0)" /> <use xlink:href="#cup" transform="rotate(15) scale(-1,1) translate(-520,0)" /> <use xlink:href="#cup" transform="translate(600,250) rotate(-25)" /> <g style="stroke:blue; stroke-width:0.5mm"> <line x1="600" x2="600" y1="75" y2="425" transform="rotate(-25,600,250)" /> <line x1="600" x2="600" y1="75" y2="425" transform="rotate(65,600,250)" /> </g> <use xlink:href="#cup" transform="translate(600,250) rotate(-25) scale(-1,1)" /> <use xlink:href="#cup" transform="translate(600,250) rotate(-25) scale(-0.25)" /> <use xlink:href="#cup" transform="translate(600,250) rotate(-25) scale(-0.25,1)" /> <use xlink:href="#cup" transform="translate(600,250) rotate(-25) scale(1,-1)" /> <use xlink:href="#cup" transform="translate(600,250) rotate(-25) scale(-1,1) translate(350,-150)" /> <circle cx="600" cy="250" r="5" fill="red" /> <line x1="470" y1="400" x2="240" y2="400" class="arrow" /> <g class="txt"> text goes here </g> </svg>