制作带有css边框的SVG图标作为一个元素

Posted

技术标签:

【中文标题】制作带有css边框的SVG图标作为一个元素【英文标题】:Making SVG icon with css border as one element 【发布时间】:2014-02-08 12:51:01 【问题描述】:

例如:http://jsfiddle.net/8H3Ay/2/.

您好,我有一个通过 css 添加边框的 SVG 图标。我想把它变成一个元素(不是单独的 svg 图标和边框),这样当我将鼠标悬停在圆圈内或圆圈外一点时,它会改变边框以及 SVG 图标的颜色。

另外,如果我有任何其他方法可以制作在小屏幕上看起来不错的图标,请告诉我。我查看了 css sprites,但不知道如何使图标缩放得很好(我的图标变得模糊,就像普通的 .png 图像一样)

html:

<a href="#">                
     <?xml version="1.0" encoding="utf-8"?>
    <!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
    <svg version="1.1" id="facebook" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
         viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
    <text transform="matrix(1 0 0 1 168.7834 543.8093)"><tspan x="0" y="0" fill="#FFFF00" font-family="'Verdana-Bold'" font-size="20">simpleicon.com</tspan><tspan x="-159.59" y="24" fill="#FFFF00" font-family="'Verdana'" font-size="20">Collection Of Flat Icon, Symbols And Glyph Icons</tspan></text>
    <g id="_x23_020201ff">
      <path fill="#444444" d="M223.22,71.227c16.066-15.298,38.918-20.465,60.475-21.109c22.799-0.205,45.589-0.081,68.388-0.072
        c0.09,24.051,0.098,48.111-0.009,72.161c-14.734-0.026-29.478,0.036-44.212-0.026c-9.343-0.582-18.937,6.5-20.635,15.762
        c-0.224,16.093-0.081,32.195-0.072,48.289c21.61,0.089,43.22-0.027,64.829,0.054c-1.582,23.281-4.47,46.456-7.858,69.541
        c-19.088,0.179-38.187-0.018-57.274,0.099c-0.17,68.665,0.089,137.33-0.134,205.995c-28.352,0.116-56.721-0.054-85.072,0.08
        c-0.537-68.674,0.044-137.383-0.295-206.066c-13.832-0.144-27.672,0.099-41.503-0.116c0.053-23.085,0.018-46.169,0.026-69.246
        c13.822-0.169,27.654,0.036,41.477-0.098c0.42-22.442-0.421-44.91,0.438-67.333C203.175,101.384,209.943,83.493,223.22,71.227z"/>
    </g>
    </svg>
 </a>

css:

#facebook
  border: 4px solid #444444;
  border-radius: 50%;
  padding: 10px;

#facebook:hover
  border:4px solid #3b5998;

#facebook path:hover
  fill:#3b5998;

【问题讨论】:

【参考方案1】:

如果我理解正确,您想更改 hover 上整个 SVG 元素的颜色。

如果是这样,您需要按如下方式更改 CSS 选择器:

#facebook:hover 
  border: 3px solid #3b5998;


#facebook:hover path  /* <-- change the 'path' fill color on hover */
  fill: #3b5998;

JSFiddle Demo

【讨论】:

是的!谢谢,很抱歉这个问题的措辞如此糟糕,我不知道如何更好地表达。

以上是关于制作带有css边框的SVG图标作为一个元素的主要内容,如果未能解决你的问题,请参考以下文章

汉堡图标:尽管像素对齐,但面包+汉堡的大小相同?

当使用 css3 缩放元素时,它会变成像素化,直到动画完成之后。我正在为带有边框的元素制作动画

我想将工具提示添加到 svg 元素。尝试过基础 CSS 和 Javascript

如何在 CSS 中为 SVG 元素添加边框/轮廓/描边?

如何使用 CSS(jQuery SVG 图像替换)更改 SVG 图像的颜色?

如何使用 CSS(jQuery SVG 图像替换)更改 SVG 图像的颜色?