正文 

当前位置： 首页 > 知识 >

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

     2023-03-07     152

关键词：

【中文标题】制作带有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

【讨论】：

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

如何制作带有矩形 SVG 图标的方形图标按钮

】如何制作带有矩形SVG图标的方形图标按钮【英文标题】：HowtoMakeSquareIconButtonswithRectangularSVGIconsInsideThem【发布时间】：2019-07-0316:30:15【问题描述】：我正在尝试使用React、样式组件和SVG制作我自己的图标按钮。我的图标通常是... 查看详情

是否可以使用 SVG 矩形作为具有可变高度的 HTML 元素的边框

】是否可以使用SVG矩形作为具有可变高度的HTML元素的边框【英文标题】：IsitpossibletouseanSVGrectastheborderforanHTMLelementwithvariableheight【发布时间】：2015-06-1920:54:12【问题描述】：我正在尝试使用SVG在具有固定宽度但灵活高度的HTML块... 查看详情

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

...2022-01-0710:20:49【问题描述】：我有一个学校项目，我必须制作一张“宝藏”地图。我的想法是将世界地图作为带有国家和大陆的SVG元素。我得到了每个国家都有边界作为元素的地图。我尝试使用vanillaCSS创建 查看详情

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

...成像素化，直到动画完成之后。我正在为带有边框的元素制作动画【英文标题】：whenscalinganelementwithcss3scale,itbecomespixelateduntiljustaftertheanimationiscomplete.I\'manimatinganelementwithaborder【发布时间】：2012-04-1616:36:00【问题描述】：http://jsf... 查看详情

svg图标无法修改颜色的解决方案

参考技术A问题原因：该部分svg图标带有fill属性，不能直接通过css修改fill属性。解决思路：一、移除默认颜色(去色操作)；二、利用CSS3滤镜filter中的属性drop-shadow。要使用标准的css3实现某元素的投影效果，有两个方法，第一个就... 查看详情

如何制作图标字体（如何将svg转换为css可用的图标字体）

转自： 如何制作图标字体（如何将svg转换为css可用的图标字体）具体描述在项目开发当中，我们常常遇到需要将获取到的svg转换为，css可用的图标字体，那么具体该如何进行操作呢具体操作登录icomoon点击右上角登录旁边的ic... 查看详情

如何制作图标字体（如何将svg转换为css可用的图标字体）

转自： 如何制作图标字体（如何将svg转换为css可用的图标字体）具体描述在项目开发当中，我们常常遇到需要将获取到的svg转换为，css可用的图标字体，那么具体该如何进行操作呢具体操作登录icomoon点击右上角登录旁边的ic... 查看详情

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

】如何在CSS中为SVG元素添加边框/轮廓/描边？【英文标题】：Howtoaddborder/outline/stroketoSVGelementsinCSS?【发布时间】：2013-08-2205:26:02【问题描述】：感谢D3js，我将SVG元素注入网页。我很难为这些元素设置样式，因为像这样的语法pathbo... 查看详情

使用 SVG 过滤器向 SVG 图像元素添加边框 [重复]

】使用SVG过滤器向SVG图像元素添加边框[重复]【英文标题】：AddingabordertoanSVGimageelementwithSVGfilters[duplicate]【发布时间】：2022-01-2109:15:30【问题描述】：我正在寻找一种使用SVG过滤器而不是CSS为SVG图像元素添加边框的方法，但我不... 查看详情

SVG 元素的 CSS 动画在 Chrome 中不起作用

...例代码适用于IE、Firefox和S̵a̵f̵a̵r̵i̵，但拒绝在Chrome中制作动画。如果我将动画类从circle移动到use元素Chrome将为整个图标设 查看详情

（转）利用svg和css3实现有趣的边框动画

原文地址今天我们来探索一下CarlPhilipeBrenner的网站上一个微妙而有趣的动画效果。当鼠标经过网格元素时，会有一个微妙的动画发生——网格元素变得透明，每条边有个顺时针的动画，创造了非常好的效果。这种效果是通过JS给s... 查看详情

svg符号和css变量做出彩色图标

设置SVG符号图标内嵌的SVG的问题在于它们的冗余。你肯定不想在每次使用同一个图标时复制粘贴所有的坐标。这显得笨拙，可读性差，难以维护。使用SVG符号图标，你只要复制整个SVG元素一次，然后你就可以用一个引用在任何地... 查看详情

SVG元素的CSS背景[重复]

...正在尝试创建一个具有内联SVG的HTML，该内联SVG具有一个带有CSS背景的元素：<html><body><svg><foreignObject><divstyle="red;width:50;h 查看详情

汉堡图标：尽管像素对齐，但面包+汉堡的大小相同？

...矩形的边缘与像素网格对齐。我尝试了几种不同的方法来制作汉堡图标：绝对定位一些带有背景颜色的div。内嵌svg标签svg作为背景 查看详情

是否可以纯粹在css中制作一个带有1个尖边的1px边框输入字段？

】是否可以纯粹在css中制作一个带有1个尖边的1px边框输入字段？【英文标题】：Isitpossibletomakea1pxborderedinputfieldwith1pointedsidepurelyincss?【发布时间】：2013-02-0521:31:38【问题描述】：我正在尝试为应用了:hover和:focus伪类的搜索框构建... 查看详情

按矩形中心垂直对齐 SVG 内的矩形元素

...0:42:43【问题描述】：目标：我在网上找到了一个tutorial来制作一个CSS3无限加载图标，使用的矩形的高度会增长和缩小。它们最终看起来像：它使用5个divs包裹在一个外部div中，并且运行良好。不过，我想尝试使用SVG重新创建效果... 查看详情

制作带有边框和填充的菱形图像

】制作带有边框和填充的菱形图像【英文标题】：Makearhombusimagewithborderandpadding【发布时间】：2020-08-2210:34:09【问题描述】：我想制作一个菱形的图像，带有边框和填充。我已经设法将图像制作成菱形，但没有成功地在其周围制... 查看详情

SVG 图标动画留下一个像素间隙

...发布时间】：2017-01-2217:05:18【问题描述】：我正在使用CSS制作SVG动画，我注意到在我的线条绘制动画中，任何SVG矩形（#clipboard-border和#clipboard-clip-border）笔划总是会排除左上角的一部分角，这使它成为一个不完整的矩形。我尝试... 查看详情