svg sprite / 旋转图标 180°

Question

我是使用 svg-sprites 的新手。我想知道是否有办法直接从精灵旋转图标。

我尝试将 // transform: rotate(180) // 应用到我的 icons-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> ....

在这里我通过 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>

请注意，为了进一步简化我正在重用 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>