Блог

Главная - Вопросы по программированию - svg поворачивается на 90 градусов, но исчезает

svg поворачивается на 90 градусов, но исчезает

#css #svg

#css #svg

Вопрос:

У меня есть svg, который представляет собой стрелку, обращенную вправо. Однако я не могу сделать стрелку вниз, добавив transform: rotate() . Когда я меняю путь css svg, вся стрелка исчезает. Как мне это решить?

Перед:

введите описание изображения здесь

После:

введите описание изображения здесь

В моем html и css,

 svg path {
transform: rotate(90);
} 
 <svg class="arrow-right" xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 25 25">
 <g id="ico___black" data-name="ico_amp;>_black" transform="translate(19525 16160)">
   <path id="パス_60" data-name="パス 60" d="M1061.961,192.633l5.465,5.465,5.465-5.465"
     transform="translate(-19707.389 -15080.434) rotate(-90)" fill="none" stroke="#2b2525"
     stroke-width="2" />
   <rect id="長方形_124" data-name="長方形 124" width="25" height="25" transform="translate(-19525 -16160)" 
     fill="none" />
 </g>
</svg>

Комментарии:

1. Попробуйте преобразовать svg не svg path

2. пожалуйста, используйте вместо этого этот svg: намного чище без стольких преобразований: <svg width='24' height='24' viewBox='0 0 24 24'><title>navigate next</title> <path d='M10 6l-1.41 1.41 4.58 4.59-4.58 4.59 1.41 1.41 6-6z'></path> <path d='M0 0h24v24h-24z' fill='none'></path> </svg> Также в CSS вам нужно сделать: svg path { transform: rotate(90deg); transform-origin: center center; } в CSS вращение происходит вокруг точки 0,0. Вот почему вам нужно преобразовать начало координат в центр

3. Чтобы понять, что произойдет, если вы не преобразуете источник, добавьте svg{overflow:visible} в свой css

Ответ №1:

вы можете применить преобразование к svg вместо пути.

 svg {    
  transform: rotate(90);
}
Метки: