Повернуть фактический путь SVG на 90 градусов? - PullRequest
Новая
       20

Повернуть фактический путь SVG на 90 градусов?

2 голосов
/ 07 мая 2019

У меня есть этот путь, который я хочу повернуть на 90 градусов.Не просто вращать весь элемент, я хочу изменить фактический путь, чтобы получить стрелку вверх и стрелку вниз.Есть ли инструмент преобразования пути или какой-то другой простой способ сделать это? 

<svg xmlns="http://www.w3.org/2000/svg">
    <path d="M8.578 16.359l4.594-4.594-4.594-4.594 1.406-1.406 6 6-6 6z"></path>
</svg>

Я действительно нашел библиотеку SVG, которая имела точные формы, которые я ищу (см. Ниже).Если бы кто-нибудь мог сказать мне, как я сам достиг бы этого результата, это было бы здорово.Спасибо! 

<svg xmlns="http://www.w3.org/2000/svg">
    <path d="M7.406 7.828l4.594 4.594 4.594-4.594 1.406 1.406-6 6-6-6z"></path>
</svg>

<svg xmlns="http://www.w3.org/2000/svg">
    <path d="M7.406 15.422l-1.406-1.406 6-6 6 6-1.406 1.406-4.594-4.594z"></path>
</svg>

Ответы [ 2 ]

1 голос
/ 07 мая 2019

Сначала вам нужно добавить атрибут viewBox к элементу svg.Я использую viewBox="-12 -12 24 24", что означает, что точка 0,0 находится в самой середине svg canvas.Далее я использую <polyline> для создания стрелки.Поскольку я использую круглые числа, я могу кодировать стрелку вручную.

points="0,-10 10,0 0,10" означает, что сначала вы двигаетесь к точке x:0,y:-10, я рисую линию к точке x:10,y:0 и, наконец, к точке X:0,y:10

Я установилwidth элемента svg width="100", но вы можете изменить его на то, что вам нужно. 

svg{border:1px solid}
polyline{fill:none; stroke:black;stroke-linejoin:round;stroke-linecap: round;}
<svg viewBox="-12 -12 24 24" width="100">
  <polyline points="0,-10 10,0 0,10" />
</svg>

<svg viewBox="-12 -12 24 24" width="100">
  <polyline points="0,-10 -10,0 0,10" />
</svg>

<svg viewBox="-12 -12 24 24" width="100">
  <polyline points="-10,0 0,-10 10,0" />
</svg>

<svg viewBox="-12 -12 24 24" width="100">
  <polyline points="-10,0 0,10 10,0" />
</svg>

Если вам не нравится <polyline> и вы хотите использовать путь, вот как вы это сделаете: 

svg{border:1px solid}
path{fill:none; stroke:black;stroke-linejoin:round;stroke-linecap: round;}
<svg viewBox="-12 -12 24 24" width="100">
  <path d="M0,-10 L10,0 0,10" />
</svg>

<svg viewBox="-12 -12 24 24" width="100">
  <path d="M0,-10 L-10,0 0,10" />
</svg>

<svg viewBox="-12 -12 24 24" width="100">
  <path d="M-10,0 L0,-10 10,0" />
</svg>

<svg viewBox="-12 -12 24 24" width="100">
  <path d="M-10,0 L0,10 10,0" />
</svg>
0 голосов
/ 07 мая 2019

Вы можете обернуть в div и стилизовать. Конечно, вы можете использовать этот стиль сразу для svg, но не все браузеры поддерживают его. 

.icon {
 height: 20px;
 transform: rotate(90deg);
 width: 20px;
}
<div class='icon'>
 <svg xmlns="http://www.w3.org/2000/svg">
  <path d="M8.578 16.359l4.594-4.594-4.594-4.594 1.406-1.406 6 6-6 6z"></path>
 </svg>
</div>

Вы также можете использовать атрибут transform. 

<svg xmlns="http://www.w3.org/2000/svg">
  <path transform='rotate(90 10 10)' d="M8.578 16.359l4.594-4.594-4.594-4.594 1.406-1.406 6 6-6 6z"></path>
</svg>

Видимо, нет других простых способов. Но вы также можете определить путь в css

Если вы вставите svg через фон (: до или: после) , вы вообще не сможете изменить . Только через rotate в css.

...