Chapter 9 - 4 : Transform attribute (skewX, skewY) SVG

skewX, skewY から構成されるスキュー・トランスフォーメーションは、その形状からシアリング(shearing) と呼ばれたりします。

skewX はX軸に対して、skewY はY軸に対して設定された角度分、図のようにオブジェクトを変形させます。

もし設定角度(angle)がマイナスの場合は、逆の方向になります。

transform = "translate(tx [ ty]) rotate(angle [cx cy]) scale(sx [sy]) skewX(angle) skewY(angle)" transform = "translate(tx, ty)" ---> transform = "matrix(1, 0, tx, d, 1, ty)" transform = "skewX(angle)" ---> transform = "matrix(1, tan α, 0, 0, 1, 0)" transform ="skewY(angle)" ---> transform ="matrix(1, 0, 0, tan α, 1, 0)"

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

scale や rotate プロパティと同じように、同じtransform 属性で、skew の後にtranslate が設定されると移動する方向が違ってきます。

色の名称はこちらを参考：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="850" height="530"> <desc>skewX skewY property</desc> <title>skewX skewY property</title> <style type="text/css"> <![CDATA[ .arrow {stroke:red;stroke-width:2.5; marker-end:url(#end_red); } .txt {font-family:Arial;font-weight:bold; font-size:15; } ]]> </style> <defs> <g id="grid"> <line x1="0" y1="265" x2="850" y2="265" fill="none" stroke-width="530" stroke="Gainsboro" stroke-dasharray="0.5 9.5" /> <line x1="425" y1="0" x2="425" y2="530" fill="none" stroke-width="850" stroke="Gainsboro" stroke-dasharray="0.5 9.5" /> </g> <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" 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> <linearGradient id="shade2" x2="50%" y2="0%" spreadMethod="reflect"> <stop offset="0%" stop-color="darkslategray"/> <stop offset="100%" stop-color="white"/> </linearGradient> <g id="can" stroke="black" stroke-linejoin="round" > <rect width="100" height="150" rx="8" ry="8" fill="url(#shade1)" /> <rect width="102" height="5" x="-1" y="-1" fill="url(#shade1)" /> <rect width="102" height="5" x="-1" y="146" fill="url(#shade1)" /> </g> </defs> <!-- grids //--> <use xlink:href="#grid" /> <line id="line1" x1="0" x2="800" y1="0" y2="0" stroke="blue" stroke-width="0.25mm" transform="rotate(45)" /> <use xlink:href="#line1" transform="rotate(-18.5)" /> <use xlink:href="#line1" transform="translate(750,0) rotate(90)" /> <line class="arrow" x1="110" y1="80" x2="650" y2="80" /> <line class="arrow" x1="630" y1="170" x2="460" y2="340" /> <use xlink:href="#can" /> <use xlink:href="#can" transform="skewX(45) skewY(45) translate(200,0)" /> <use xlink:href="#can" transform="translate(750,0) skewX(-45)" /> <use xlink:href="#can" transform="translate(750,0) skewX(-45) translate(0,350)" /> <use xlink:href="#can" transform="skewY(45)" /> <use xlink:href="#can" transform="skewY(45) translate(200,0)" /> <use xlink:href="#can" transform="translate(200,0) skewY(45)" /> <circle cx="750" cy="0" r="5" fill="red" /> <circle cx="0" cy="0" r="5" fill="red" /> <line class="arrow" x1="110" y1="210" x2="180" y2="280" /> <line class="arrow" x1="110" y1="120" x2="180" y2="120" /> <g class="txt"> text goes here </g> </svg>