svg精灵/旋转图标180°

Question

我是使用svg-sprite的新手。我想知道是否有一种方法可以直接从精灵中旋转图标。

我试图对我的icons-sprite.svg应用//变换：rotate（180）//，但我做错了，因为图标消失了。

这是我的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> ....

在这里我通过CSS称呼“ _down”图标：

&__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>

但是它似乎不起作用。尝试时我的图标就消失了。

非常感谢您的帮助！

卡洛斯

Answer 1

首先，您有很多无用的代码，例如来回转换形状。您可以将代码简化为：

<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>

现在您可以像这样使用相同的文件来进行拇指向下和拇指向上移动：

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>