svg sprite / повернуть значок на 180 ° - PullRequest
Новая
       38

svg sprite / повернуть значок на 180 °

0 голосов
/ 07 ноября 2019

Я новичок в использовании svg-sprites. Мне было интересно, есть ли способ повернуть иконку из спрайта напрямую.

Я пытался применить // transform: rotate (180) // к значкам-sprite.svg, но я делаю что-то не так, так как значок просто исчезает.

Вот источниккод для моего svg: 

 <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="icons-sprite" transform="translate(1.000000, 0.000000)">
            <g id="thumb-down" transform=" translate(48.000000, 719.000000)">
                <polygon id="Path" points="0 0 24 0 24 24 0 24"></polygon>
                <path d="M15,2 L6,2 C5.17,2 4.46,2.5 4.16,3.22 L1.14,10.27 C1.05,10.5 1,10.74 1,11 L1,13 C1,14.1 1.9,15 3,15 L9.31,15 L8.36,19.57 L8.33,19.89 C8.33,20.3 8.5,20.68 8.77,20.95 L9.83,22 L16.42,15.41 C16.78,15.05 17,14.55 17,14 L17,4 C17,2.9 16.1,2 15,2 Z M19,2 L19,14 L23,14 L23,2 L19,2 Z" id="Shape" fill="#DB303E" fill-rule="nonzero"></path>
            </g> ....

И здесь, где я называю иконку "_down" через CSS: 

&__down {
      background: url('/images/icons/svg/icons-sprite.svg') -48px -692px
        no-repeat;
      background-size: 125px;
      &_opac{
        opacity: 0.4;
        background: url('/images/icons/svg/icons-sprite.svg') -48px -692px
        no-repeat;
      background-size: 125px;
      }
    }

Как уже упоминалось, применяя transform = "rotate (180)" кФайл CSS работает нормально, но мне было интересно, удобнее (по какой-либо причине) делать это в файле svg. Вот что я попробовал: 

<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="icons-sprite" transform="rotate(180) translate(1.000000, 0.000000)">
            <g id="thumb-down" transform=" translate(48.000000, 719.000000)">
                <polygon id="Path" points="0 0 24 0 24 24 0 24"></polygon>
                <path d="M15,2 L6,2 C5.17,2 4.46,2.5 4.16,3.22 L1.14,10.27 C1.05,10.5 1,10.74 1,11 L1,13 C1,14.1 1.9,15 3,15 L9.31,15 L8.36,19.57 L8.33,19.89 C8.33,20.3 8.5,20.68 8.77,20.95 L9.83,22 L16.42,15.41 C16.78,15.05 17,14.55 17,14 L17,4 C17,2.9 16.1,2 15,2 Z M19,2 L19,14 L23,14 L23,2 L19,2 Z" id="Shape" fill="#DB303E" fill-rule="nonzero"></path>
            </g>

Но, похоже, это не работает. Моя иконка просто исчезает при попытке.

Большое спасибо за помощь !!

Карлос

1 Ответ

1 голос
/ 07 ноября 2019

Для начала у вас есть много бесполезного кода, такого как перевод фигур туда и обратно. Вы можете упростить код до этого: 

<svg viewBox="0 0 24 24">
            <g id="thumb-down">
                <polygon id="Path" points="0 0 24 0 24 24 0 24"></polygon>
                <path d="M15,2 L6,2 C5.17,2 4.46,2.5 4.16,3.22 L1.14,10.27 C1.05,10.5 1,10.74 1,11 L1,13 C1,14.1 1.9,15 3,15 L9.31,15 L8.36,19.57 L8.33,19.89 C8.33,20.3 8.5,20.68 8.77,20.95 L9.83,22 L16.42,15.41 C16.78,15.05 17,14.55 17,14 L17,4 C17,2.9 16.1,2 15,2 Z M19,2 L19,14 L23,14 L23,2 L19,2 Z" id="Shape" fill="#DB303E" fill-rule="nonzero"></path>
                </g>
          </svg>

Чтобы иметь большой палец вверх, вы можете использовать это преобразование для пути: transform="scale(-1,-1) translate(-24,-24)": 

<svg viewBox="0 0 24 24">
            <g id="thumb-up">
                <polygon id="Path" points="0 0 24 0 24 24 0 24"></polygon>
                <path transform="scale(-1,-1) translate(-24,-24)" d="M15,2 L6,2 C5.17,2 4.46,2.5 4.16,3.22 L1.14,10.27 C1.05,10.5 1,10.74 1,11 L1,13 C1,14.1 1.9,15 3,15 L9.31,15 L8.36,19.57 L8.33,19.89 C8.33,20.3 8.5,20.68 8.77,20.95 L9.83,22 L16.42,15.41 C16.78,15.05 17,14.55 17,14 L17,4 C17,2.9 16.1,2 15,2 Z M19,2 L19,14 L23,14 L23,2 L19,2 Z" id="Shape" fill="#DB303E" fill-rule="nonzero"></path>
                </g>
          </svg>

Поскольку вы намереваетесь использовать его в качестве спрайта, вы можете поместить его в один и тот же элемент SVG, например: 

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
<style type="text/css">
 <![CDATA[  
    svg > svg:not(:target) {
    display: none;
    }
     ]]> 
</style>

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" id="thumb-down">
    <g id="thumb">
                <polygon id="Path" points="0 0 24 0 24 24 0 24"></polygon>
                <path d="M15,2 L6,2 C5.17,2 4.46,2.5 4.16,3.22 L1.14,10.27 C1.05,10.5 1,10.74 1,11 L1,13 C1,14.1 1.9,15 3,15 L9.31,15 L8.36,19.57 L8.33,19.89 C8.33,20.3 8.5,20.68 8.77,20.95 L9.83,22 L16.42,15.41 C16.78,15.05 17,14.55 17,14 L17,4 C17,2.9 16.1,2 15,2 Z M19,2 L19,14 L23,14 L23,2 L19,2 Z" id="Shape" fill="#DB303E" fill-rule="nonzero"></path></g>
          </svg>

  <svg  version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"  id="thumb-up">
      <use xlink:href="#thumb" transform="scale(-1,-1) translate(-24,-24)" />
          </svg>
</svg>

Обратите внимание, что вЧтобы еще больше упростить код, я снова использую thumbs_down: 

<use xlink:href="#thumb" transform="scale(-1,-1) translate(-24,-24)" />

Теперь вы используете один и тот же файл для большого и большого пальца, например: 

background: url('/images/icons/svg/icons-sprite.svg#thumb-down');
...
background: url('/images/icons/svg/icons-sprite.svg#thumb-up');


div{
width:100px;
height:100px;
background-size:cover;
background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/SOquestion.svg#thumb-up);}
<div></div>
...