在SVG中以特定角度放置路径

Question

我有以下代码，其中包含使用（路径）和圆绘制的三角形。我想将三角形​​放在所有四个轴上45度。我不知道如何以数学方式做到这一点。圆的半径可以变化。那么如何将三角形分别放置在4个位置的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"
	 style="enable-background:new 0 0 22 14;" xml:space="preserve">
<style type="text/css">
	.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 Transforms或SVG transform属性来实现此目的。

您可以通过在标记内放置圆圈和路径来旋转路径和圆圈，您可以使用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中不支持CSS变换SVG元素。您可以尝试路径元素的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/

您可以参考所有三个样本的粗略示例代码集：http://codepen.io/priyanka-herur/pen/yJRYZV

Answer 2

通过在远离需要的某个奇点处定义指针三角形，你正在改变自己的生活。

如果你将triange定义在正常的“0”位置，你可以很容易地将它指向你想要的位置（见下文）。

rotate()的第一个值是角度，另外两个坐标是旋转中心。在你的情况下是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"
	 style="enable-background:new 0 0 22 14;" xml:space="preserve">
<style type="text/css">
	.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>