我是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,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;
}
}
如前所述,对CSS文件应用transform =“ rotate(180)”可以正常工作,但是我想知道在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,2 Z" id="Shape" fill="#DB303E" fill-rule="nonzero"></path>
</g>
但是它似乎不起作用。尝试时我的图标就消失了。
非常感谢您的帮助!
卡洛斯