Поместите путь под определенным углом в SVG

Question

У меня есть код ниже, который содержит треугольник, нарисованный с помощью (Путь) и круга. Я хочу разместить треугольник 45 градусов по всем четырем осям. Я не знаю, как это сделать математически. Радиус круга может изменяться. Итак, как разместить треугольник в 45 градусах на 4 позиции соответственно, как показано на рисунке ниже? (Треугольник должен быть одним пикселем внутри круга).

.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"/> 

CSS Преобразования на элементах SVG не поддерживаются в IE9. Вы можете попробовать атрибут 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/

Вы можете обратиться к этой черновую выборку codepen для всех трех образцов: http://codepen.io/priyanka-herur/pen/yJRYZV

Answer 2

Вы делаете вашу собственную жизнь трудно, определив свой указатель треугольник в какой-то нечетной точке, где это необходимо.

Если вы определяете свой треугольник в нормальном положении «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" 
 
\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>