SVGに特定の角度でパスを配置

Question

（パス）と円を使用して描画された三角形を含む以下のコードがあります。私は三角形をすべての4軸に45度の角度で配置したいと思います。私はそれを数学的にする方法を知らない。円の半径は変わることがあります。では、下の図のように三角形をそれぞれ45度の位置に配置するにはどうすればいいですか？（三角形は円の内側の単一ピクセルである必要があります）

.st0{fill:#F24343;}

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
 
\t style="enable-background:new 0 0 22 14;" xml:space="preserve"> 
 
<style type="text/css"> 
 
\t .st0{fill:#F24343;} 
 
</style> 
 
    <circle cx="40" cy="40" r="20" fill="green"/> 
 
<path class="st0" d="M22,0H0l9.4,12.8c0.8,1.1,2.4,1.1,3.2,0L22,0z" style="transform: translate(22px,44px) rotate(45deg)"/> 
 
</svg> 
 

 
<circle cx="40" cy="40" r="20" fill="green"/>

---

Answer 1

あなたはCSSトランスフォームでの仕事やSVGのどちらかがこれを達成するために属性を変換することができます。

サークルとパスをタグ内に入れてパスとサークルの両方を回転させることができます。また、CSS変換を使用して回転させることもできます。

<g class="rotate_me"> 
    <circle cx="40" cy="40" r="20" fill="green"/> 
    <path transform="rotate(5 50 50)" class="st0" d="M22,0H0l9.4,12.8c0.8,1.1,2.4,1.1,3.2,0L22,0z" style="transform: translate(22px,44px) rotate(45deg)"/> 
</g> 

CSS：また、パスにクラスを追加し、必要な値を取得するには、原点を変換して再生することができます

.rotate_me { 
    transform: rotate(180deg); 
    transform-origin: 50% 50%; 
} 

。

<path class="rotate_me" d="M 15.1929 28.9648 L 15.1929 11.8555 L 29.1138 20.4102 L 15.1929 28.9648 Z" fill="#74c190"/> 

IE9ではSVG要素のCSS変換はサポートされていません。パス要素のtransform属性を試すことができます。あなたがまた見たいかもしれません

<path transform="rotate(25 20 10)" d="M 15.1929 28.9648 L 15.1929 11.8555 L 29.1138 20.4102 L 15.1929 28.9648 Z" fill="#74c190"/> 

：https://css-tricks.com/snippets/css/css-triangle/

あなたはすべての3つのサンプルのためcodepenこのラフサンプルを参照することができます：http://codepen.io/priyanka-herur/pen/yJRYZV

Answer 2

あなたは、ポインタの三角形を定義することで、自分の人生を困難にしていますそれが必要な場所から離れた奇妙なところで。

トライアングルを通常の「0」の位置に定義すると、その位置を容易に指定することができます（下記参照）。

rotate()の最初の値は角度であり、他の2つの座標は回転の中心です。あなたの場合、それは40,40（サークルの中心）です。

.st0{fill:#F24343;}

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
 
\t style="enable-background:new 0 0 22 14;" xml:space="preserve"> 
 
<style type="text/css"> 
 
\t .st0{fill:#F24343;} 
 
</style> 
 
    <circle cx="40" cy="40" r="20" fill="green"/> 
 
    <path class="st0" d="M28,21 L 52,21, L40,8 Z" transform="rotate(45, 40,40)"/> 
 
</svg>