我使用 svg 作为按钮的背景图像。
按钮需要不同的悬停状态，这只是对 svg 填充值的更改。
有没有一种聪明的方法可以对实际上只是用作图像的 svg 进行这些更改，还是我需要创建一个具有不同填充颜色的不同 svg 文件？
问问题
4092 次
3 回答
4
另一种具有背景位置的方法。
HTML
<div class="locate">
<a href="#">lorem ipsum</a>
</div>
CSS
.locate a {
padding-left: 20px;
position: relative;
text-decoration: underline;
color: #000;
}
.locate a:before {
width: 16px;
height: 16px;
content: "";
background: transparent url('search.svg') no-repeat scroll 0 0;
-webkit-background-size: 16px 32px;
background-size: 16px 32px;
position: absolute;
top: 0;
left: 0;
/* For screen reader */
speak: none;
}
.locate a:hover,
.locate a:focus {
color: #a2005a;
text-decoration: none;
}
.locate a:hover:before,
.locate a:focus:before {
background-position: 0 -16px;
}
SVG
<svg xmlns="http://www.w3.org/2000/svg">
<path d="M15.838,13.693l-2.785-2.786c0.705-1.103,1.121-2.408,1.121-3.813c0-3.911-3.17-7.081-7.081-7.081
c-3.911,0-7.081,3.17-7.081,7.081c0,3.91,3.17,7.08,7.081,7.08c1.406,0,2.712-0.415,3.813-1.121l2.787,2.786
c0.195,0.197,0.518,0.197,0.715,0l1.43-1.43C16.037,14.211,16.037,13.891,15.838,13.693z M7.093,12.15
c-2.789,0-5.058-2.27-5.058-5.058c0-2.789,2.269-5.058,5.058-5.058c2.79,0,5.058,2.269,5.058,5.058
C12.15,9.882,9.883,12.15,7.093,12.15z"/>
<path fill="#A2005A" d="M15.838,29.678l-2.785-2.786c0.705-1.103,1.121-2.408,1.121-3.813c0-3.91-3.17-7.08-7.081-7.08
c-3.911,0-7.081,3.17-7.081,7.08s3.17,7.08,7.081,7.08c1.406,0,2.712-0.415,3.813-1.121l2.787,2.786
c0.195,0.197,0.518,0.197,0.715,0l1.43-1.43C16.037,30.195,16.037,29.875,15.838,29.678z M7.093,28.135
c-2.789,0-5.058-2.27-5.058-5.058s2.269-5.058,5.058-5.058c2.79,0,5.058,2.27,5.058,5.058C12.15,25.866,9.883,28.135,7.093,28.135z"
/>
</svg>
于 2015-07-02T15:11:39.243 回答
2
是的，您可以使用 SVG 内联。在 IE 11 中不起作用。
<p class="loupe"><a href="#">Lorem ipsum</a></p>
.loupe a {
background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><path d='M15.838,13.693l-2.785-2.786c0.705-1.102,1.121-2.408,1.121-3.813c0-3.911-3.17-7.081-7.081-7.081s-7.081,3.17-7.081,7.081c0,3.91,3.17,7.08,7.081,7.08c1.406,0,2.711-0.415,3.813-1.121l2.787,2.786c0.195,0.197,0.518,0.197,0.715,0l1.43-1.43C16.037,14.211,16.037,13.89,15.838,13.693z M7.093,12.15c-2.789,0-5.058-2.269-5.058-5.057c0-2.789,2.269-5.058,5.058-5.058c2.79,0,5.057,2.269,5.057,5.058C12.15,9.882,9.883,12.15,7.093,12.15z'/></svg>") no-repeat 0 0;
padding-left: 20px;
color: #000;
}
.loupe a:hover,
.loupe a:focus {
background: url("data:image/svg+xml;utf8,<svg fill='red' xmlns='http://www.w3.org/2000/svg'><path d='M15.838,13.693l-2.785-2.786c0.705-1.102,1.121-2.408,1.121-3.813c0-3.911-3.17-7.081-7.081-7.081s-7.081,3.17-7.081,7.081c0,3.91,3.17,7.08,7.081,7.08c1.406,0,2.711-0.415,3.813-1.121l2.787,2.786c0.195,0.197,0.518,0.197,0.715,0l1.43-1.43C16.037,14.211,16.037,13.89,15.838,13.693z M7.093,12.15c-2.789,0-5.058-2.269-5.058-5.057c0-2.789,2.269-5.058,5.058-5.058c2.79,0,5.057,2.269,5.057,5.058C12.15,9.882,9.883,12.15,7.093,12.15z'/></svg>") no-repeat 0 0;
text-decoration: none;
color: red;
}
于 2015-07-01T09:47:35.927 回答
1
如果您使用 SVG 作为背景图像，它不会是交互式的。把它想象成非常像光栅图像。拥有两张图片当然是一种解决方案。
于 2013-11-04T21:31:26.643 回答