使用CSS来设置SVG中Use元素的样式

最新推荐文章于 2024-05-31 11:58:10 发布
最新推荐文章于 2024-05-31 11:58:10 发布
阅读量1.3w 收藏 4
点赞数
分类专栏： svg

转自：http://blog.csdn.net/xiaozhu2hao/article/details/47443031

参考：

用CSS给SVG <use>的内容添加样式

http://www.w3cplus.com/svg/styling-svg-use-content-css.html



今天看到技术群中有人问svg中use元素可以设置样式属性不？因为他的symbol有200多种，但是只是颜色不一样。如果挨个定义，那svg文件就会很长。自己也思考过这个问题后来看到http://tympanus.net/codrops/2015/07/16/styling-svg-use-content-css/这篇文章，收益匪浅。这篇文章讲的比较详细。就不在解释原理了。直接上自己测试例子的代码，比较直观。

      1 单纯的svg文件，将style直接写在<svg>标签元素下

        

[html] view plain copy
  1. <svg xmlns="http://www.w3.org/2000/svg" style="display: none;"  xmlns:xlink="http://www.w3.org/1999/xlink" width="2000" height="2000">  
  2.    <style type="text/css">  
  3.      svg path {  
  4.           fill: inherit;  
  5.      }   
  6.      .codrops-1 {  
  7.         fill: #4BC0A5;  
  8.         color: #A4DFD1;  
  9.       }  
  10.     .codrops-2 {  
  11.       fill: #0099CC;  
  12.        color: #7FCBE5;  
  13.     }  
  14.     .codrops-3 {  
  15.        fill: #5F5EC0;  
  16.        color: #AEAFDD;  
  17.     }  
  18.   </style>  
  19.   <def>  
  20.     <symbol id="codrops" viewBox="0 0 23 30">  
  21.         <path class="back" fill="#aaa" d="M22.63,18.261c-0.398-3.044-2.608-6.61-4.072-9.359c-1.74-3.271-3.492-5.994-5.089-8.62l0,0   c-1.599,2.623-3.75,6.117-5.487,9.385c0.391,0.718,0.495,1.011,0.889,1.816c0.143,0.294,0.535,1.111,0.696,1.43   c0.062-0.114,0.582-1.052,0.643-1.162c0.278-0.506,0.54-0.981,0.791-1.451c0.823-1.547,1.649-2.971,2.469-4.33   c0.817,1.359,1.646,2.783,2.468,4.33c0.249,0.47,0.513,0.946,0.791,1.453c1.203,2.187,2.698,4.906,2.96,6.895   c0.292,2.237-0.259,4.312-1.556,5.839c-1.171,1.376-2.824,2.179-4.663,2.263c-1.841-0.084-3.493-0.887-4.665-2.263   c-0.16-0.192-0.311-0.391-0.448-0.599c-0.543,0.221-1.127,0.346-1.735,0.365c-0.56-0.019-1.095-0.127-1.599-0.313   c1.448,3.406,4.667,5.66,8.447,5.78C19.086,29.537,23.469,24.645,22.63,18.261z"/>  
  22.         <path class="front" fill="#ddd" d="M6.177,11.659c0.212,0.367,0.424,0.747,0.635,1.136c0.164,0.303,0.333,0.606,0.512,0.927   c0.683,1.225,1.618,2.898,1.755,3.937c0.144,1.073-0.111,2.056-0.716,2.769c-0.543,0.641-1.315,1.014-2.186,1.067   c-0.87-0.054-1.643-0.43-2.186-1.067c-0.604-0.713-0.858-1.695-0.715-2.771c0.137-1.036,1.072-2.712,1.755-3.936   c0.18-0.32,0.349-0.623,0.513-0.927C5.752,12.404,5.964,12.026,6.177,11.659 M6.177,5.966L6.177,5.966   c-1.02,1.649-2.138,3.363-3.247,5.419c-0.932,1.728-2.344,3.967-2.598,5.88c-0.535,4.014,2.261,7.09,5.846,7.203   c3.583-0.113,6.379-3.189,5.845-7.203c-0.255-1.912-1.666-4.152-2.598-5.88C8.314,9.329,7.196,7.617,6.177,5.966L6.177,5.966z"/>  
  23.     </symbol>  
  24.   </def>  
  25.   <use x="0" y="0" width="100" height="100" xlink:href="#codrops" class="codrops-1"/>  
  26.   <use x="100" y="0" width="100" height="100"   xlink:href="#codrops" class="codrops-2"/>  
  27.   <use x="200" y="0" width="100" height="100"  xlink:href="#codrops" class="codrops-3"/>  
  28. </svg>  
     2  如果用在Html中如下

    

[html] view plain copy
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.        <style type="text/css">  
  5.         svg path {  
  6.            fill: inherit;  
  7.         }   
  8.         use.codrops-1 {  
  9.           fill: #4BC0A5;  
  10.           color: #A4DFD1;  
  11.         }  
  12.         use.codrops-2 {  
  13.          fill: #0099CC;  
  14.          color: #7FCBE5;  
  15.         }  
  16.         use.codrops-3 {  
  17.           fill: #5F5EC0;  
  18.           color: #AEAFDD;  
  19.         }  
  20.       </style>  
  21.    </head>  
  22.       
  23.    <body>  
  24.        <div style="width:1000px;height:1000px;border:2px solid #F00;overflow-y:scroll;">  
  25.         <svg style="display: none;">  
  26.           <symbol id="codrops" viewBox="0 0 23 30">  
  27.              <path class="back" fill="#aaa" d="M22.63,18.261c-0.398-3.044-2.608-6.61-4.072-9.359c-1.74-3.271-3.492-5.994-5.089-8.62l0,0   c-1.599,2.623-3.75,6.117-5.487,9.385c0.391,0.718,0.495,1.011,0.889,1.816c0.143,0.294,0.535,1.111,0.696,1.43   c0.062-0.114,0.582-1.052,0.643-1.162c0.278-0.506,0.54-0.981,0.791-1.451c0.823-1.547,1.649-2.971,2.469-4.33   c0.817,1.359,1.646,2.783,2.468,4.33c0.249,0.47,0.513,0.946,0.791,1.453c1.203,2.187,2.698,4.906,2.96,6.895   c0.292,2.237-0.259,4.312-1.556,5.839c-1.171,1.376-2.824,2.179-4.663,2.263c-1.841-0.084-3.493-0.887-4.665-2.263   c-0.16-0.192-0.311-0.391-0.448-0.599c-0.543,0.221-1.127,0.346-1.735,0.365c-0.56-0.019-1.095-0.127-1.599-0.313   c1.448,3.406,4.667,5.66,8.447,5.78C19.086,29.537,23.469,24.645,22.63,18.261z"/>  
  28.              <path class="front" fill="#ddd" d="M6.177,11.659c0.212,0.367,0.424,0.747,0.635,1.136c0.164,0.303,0.333,0.606,0.512,0.927   c0.683,1.225,1.618,2.898,1.755,3.937c0.144,1.073-0.111,2.056-0.716,2.769c-0.543,0.641-1.315,1.014-2.186,1.067   c-0.87-0.054-1.643-0.43-2.186-1.067c-0.604-0.713-0.858-1.695-0.715-2.771c0.137-1.036,1.072-2.712,1.755-3.936   c0.18-0.32,0.349-0.623,0.513-0.927C5.752,12.404,5.964,12.026,6.177,11.659 M6.177,5.966L6.177,5.966   c-1.02,1.649-2.138,3.363-3.247,5.419c-0.932,1.728-2.344,3.967-2.598,5.88c-0.535,4.014,2.261,7.09,5.846,7.203   c3.583-0.113,6.379-3.189,5.845-7.203c-0.255-1.912-1.666-4.152-2.598-5.88C8.314,9.329,7.196,7.617,6.177,5.966L6.177,5.966z"/>  
  29.           </symbol>  
  30.         </svg>  
  31.         <svg height="90px" width="69px">  
  32.             <use xlink:href="#codrops" class="codrops-1"/>  
  33.         </svg>  
  34.         <svg height="90px" width="69px">  
  35.             <use xlink:href="#codrops" class="codrops-2"/>  
  36.         </svg>  
  37.         <svg height="90px" width="69px">  
  38.             <use xlink:href="#codrops" class="codrops-3"/>  
  39.         </svg>  
  40.         </div>  
  41.     </body>  
  42. </html>  

效果如下图


auragreen
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
使用tspan元素给SVG文本添加样式、定位
nosayno的博客
05-09 6485
tspan元素 你可以把元素当成SVG文本的span。你可以用来包裹SVG文本，来对它们做整体控制，关于显示和定位，文本片段之间的相互关系等。 我们从一个简单的示例开始。           SVG       SVG       这里大多数的代码对你来说应该是熟悉的，在阅读了前面两篇文章之后。我创建了一个元素，定义了SVG视窗的尺寸，添加了一个红
svg中使用css样式,用CSS给SVG <use>的内容添加样式
weixin_29197051的博客
08-03 2783
SVG图形的一个最常见用例是图标系统，其中最常用的SVG sprite技术就是使用SVG 元素在文档中任意位置“实例化”图标。一、SVG结构化、分组，以及在SVG中引用(重用)元素速览SVG中有四个主要的元素用于在文档中定义、结构化和引用SVG代码：, , 和 。元素(“group”的简写)，用于给逻辑上相联系的图形元素分组。元素用来定义你之后要重用的元素。元素结合了和元素的优点，将定义模板的元...
[转]用CSS给SVG <use>的内容添加样式
weixin_30588827的博客
12-15 1002
来源：http://www.w3cplus.com/svg/styling-svg-use-content-css.html?utm_source=tuicool&utm_medium=referral ---------------------------------------------------------------------------------------------...
SVG 静态文件使用 ,以及如何简单修改SVG 常见样式(填充颜色、描边等)。
最新发布
youyudehan的博客
05-31 1175
简单封装 SVG 组件，在页面通过该组件展示SVG 图形，避免SVG内容过多，导致页面不美观，同时简单修改svg 样式，提供 hover 、点击等方法对SVG样式修改思路。
带有外部参考的SVG`use`，采用2
CSS 初学者指南
06-26 465
SVG具有<use>元素，该元素实质上意味着：去查找具有#identifier的SVG块，并对其进行某种克隆并将其放在此处。 这是SVG图标系统的必要组成部分。 关于此事，有些事情我们以前没有了解过 。 提醒一下，它看起来像这样： <!-- Reference IN THIS SAME DOCUMENT --> <svg> <use xl...
一篇文章带你了解SVG ＜use＞ 元素
weixin_44215068的博客
06-15 9171
目录一、简单案例分析二、在defs元素外使用形状三、设置CSS样式四、总结SVG 元素可以重用SVG文档中其他位置（包括 元素和 元素）的SVG形状。可以在 元素内部（使形状直到使用之前不可见）或外部定义重用形状。示例 这个实例显示了在元素中定义的元素。这使得不可见，除非被元素引用。在引用元素之前，必须通过其ID属性对其设置ID。元素通过其xlink:href属性。注意属性值中ID前面的#。元素通过其...
获取svg use标签内的元素
yanhappiness
01-25 6169
先讲结论：我查阅了文档，暂时也没有方法可以获取到&amp;lt;use&amp;gt;标签内的元素。 我试图使用 $(&quot;#useId&quot;).find(&quot;#contentId&quot;).attr(“attr”) – 无效 $(&quot;#contentId&quot;).attr(“attr”) – 未达到预期，选中defs内组件 $(&quot;#shadow-root&quot;
CSS3 SVG实现10秒倒计时特效特效代码
03-20
在本文中，我们将深入探讨如何使用CSS3和SVG（可缩放矢量图形）来创建一个10秒的倒计时特效。这两种技术是现代网页设计的重要组成部分，它们提供了丰富的视觉效果和高度的可定制性。 首先，CSS3是层叠样式表的第三...
CSS3 SVG卡通美食图案背景特效
07-24
此外，为了提高性能，可以考虑将多个SVG图标组合成一个SVG符号（symbol），然后使用`<use>`元素按需加载。 总的来说，“CSS3 SVG卡通美食图案背景特效”是一种巧妙地融合了CSS3动画和SVG图形的技术实践，它可以为...
CSS3 SVG表情图标评论交互特效
06-24
接着，这些SVG图标可以通过CSS3的伪类选择器和过渡效果来设置鼠标悬停或点击时的动画，例如改变颜色、旋转或放大图标。 在交互方面，可以使用JavaScript或者jQuery监听用户的点击事件，当用户选择某个表情图标后，...
SVG+CSS3实现弹性跳动动画特效特效代码
03-20
2. **应用CSS样式**：接着，我们用CSS来控制SVG元素的样式，包括颜色、大小、位置等。例如，可以设置`fill`属性来改变图形的颜色，`stroke`属性来定义边框。 3. **定义动画关键帧**：CSS3的`@keyframes`规则允许...
CSS3 SVG表情图标评论交互特效.zip
10-08
SVG还支持内联样式和JavaScript操作，这使得我们可以直接在CSS或JS中修改图标的颜色、大小甚至形状，为动态交互提供了可能。 在这个特效中，SVG图标可能通过`<svg>`标签直接内嵌在HTML中，或者通过`<use>`标签引用...
SVG中的结构化、分组和引用元素
細水、長流√的专栏
03-26 1810
SVG有自己结构化文档的方式。通过某些SVG元素，我们可以在文档中定义、分组以及引用对象。这些元素使得元件重用变得简单，而且还保持了代码的简洁性和可读性。在这篇文章中我们将讲解这些元素，并指出它们之间的区别，以及每个元素各自的优势。 使用元素分组 中的g代表group（分组）的意思。分组元素用于在逻辑上对相关的图形元素进行分组。从图形编辑器的角度，例如Adobe Illustrator
use 应用css样式(一)
牧灵泉的崖巢
08-02 1594
为方便看，这里的CSS是内嵌在svg中的。defs标签定义了一个元素，只是定义不会被解析显示。SVG中的use标签是用来引用SVG中的可视化元素。use标签引用的元素不会继承元素本身和其父元素的属性。这里就是用use标签引用defs定义的元素。use标签用class属性引用css的某个样式。如果被引用元素已经有class属性值，它的样式会保持原样。
SVG g defs symbol use元素使用详解
u012846041的专栏
10-16 1719
SVG 意为可缩放矢量图形（Scalable Vector Graphics），SVG 使用 XML 格式定义图像。 g表示分组元素，将多个元素 设置为组，实现多个元素如：平移、旋转之类的整体操作； defs实现元素定义，定义的元素不直接显示在画板上，通过use重用desf、g、symbol定义的元素，实现元素重用； symbol 兼具&lt;g&gt;的分组功能和&lt;defs&gt;初...
svg中use标签使用样式
qq_38761664的博客
06-20 1万+
今天看到技术群中有人问svg中use元素可以设置样式属性不？因为他的symbol有200多种，但是只是颜色不一样。如果挨个定义，那svg文件就会很长。自己也思考过这个问题后来看到http://tympanus.NET/codrops/2015/07/16/styling-svg-use-content-css/这篇文章，收益匪浅。这篇文章讲的比较详细。就不在解释原理了。直接上自己测试例子的代码，比
svg标签如何搭配use标签使用
ivan5277的博客
04-22 1356
元素引用另一个元素时，实际上会在内部创建一个新的Shadow DOM，这意味着对原始元素应用的样式会继承到引用的副本上，但不能直接通过常规CSS选择器作用于克隆后的元素。如果你希望修改引用元素的样式，可以直接在CSS中针对该元素ID或者。它可以引用SVG文档内的其他元素，通常这些元素是在。标签极大地提高了SVG元素的复用性，避免了文档中不必要的冗余，同时支持通过CSS进行灵活的样式控制。在SVG文档中，先创建一个或多个可以被复用的元素，比如一个形状、路径或者符号（然后，在SVG文档的任何位置，可以用。
•SVG <g>、<defs>、<symbol>和<use>元素详解
chenwunan的博客
11-09 2507
SVG &lt;g&gt;、&lt;defs&gt;、&lt;symbol&gt;和&lt;use&gt;元素详解 2017-10-15 09:49| 作者: admin| 查看: 8145| 评论: 0|来自: 蚂蚁部落 原创作品，转载需得到原作者书面许可，同时保留原作者和出处，否则将追究法律责任。 实际应用中，可能需要多次重复出现一个相同的图形。 最不明智的解决方案是每次都绘制一个全新...
SVG 复用（defs、symbol、use）
热门推荐
司马懿的西山居
11-27 1万+
<defs>与<symbol>的相同点 <defs>元素用于预定义一个元素使其能够在SVG图像中重复使用。 <symbol>元素用于定义可重复使用的符号。 嵌入在<defs>或<symbol>元素中的图形是不会被直接显示的，除非你使用<use>元素来引用它。 <defs>与<symbol>的不同点 xlink定义了一套标准的在 XML 文档中创建超级链接的方法，可以用它来引用<symbol>元素或<
vue3中使用svg
09-08
在Vue 3中使用SVG图标，可以采取以下几种方法： 1. 使用Vue插件：可以使用一些常见的Vue插件，如vue-svg-icon和vue-fontawesome，通过npm安装插件，然后在Vue项目中引入插件并使用SVG图标组件。具体的使用方法可以参考插件文档。例如，可以使用以下代码安装并使用vue-svg-icon插件： ```javascript npm install vue-svg-icon ``` ```javascript import { createApp } from 'vue'; import App from './App.vue'; import VueSvgIcon from 'vue-svg-icon'; const app = createApp(App); app.use(VueSvgIcon); app.mount('#app'); ``` 然后，在Vue模板中使用SVG图标组件，并指定图标名称： ```html <template> <div> <svg-icon name="icon-name" /> </div> </template> ``` 2. 使用CSS背景图：可以直接在项目中使用SVG图标的代码，并通过CSS控制图标的大小和样式。例如： ```html <svg style="width: 10px; height: 10px"> <use href="#icon-shanchu"></use> </svg> ``` 3. 直接在Vue模板中插入SVG图标代码：可以将SVG图标代码直接复制到Vue模板中，并根据需要添加样式和属性。例如： ```html <template> <div> <svg class="icon" viewBox="0 0 24 24"> <path d="M12 2L1 21h22L12 2zm0 4.88L18.12 19H5.88L12 6.88z" /> </svg> </div> </template> <style> .icon { width: 24px; height: 24px; fill: currentColor; } </style> ``` 4. 封装为Vue组件：可以将SVG图标封装为Vue组件，以便在应用程序中多次使用。创建一个新的Vue组件，并在模板中使用`<svg>`标签来插入SVG图标代码。例如，创建一个名为`Icon`的Vue组件： ```html <template> <div> <Icon /> </div> </template> <script> import Icon from './Icon.vue'; export default { components: { Icon } }; </script> <!-- Icon.vue --> <template> <svg class="icon" viewBox="0 0 24 24"> <path d="M12 2L1 21h22L12 2zm0 4.88L18.12 19H5.88L12 6.88z" /> </svg> </template> <style> .icon { width: 24px; height: 24px; fill: currentColor; } </style> ``` 以上就是在Vue 3中使用SVG图标的几种方法。具体选择哪种方法取决于你的项目需求和个人偏好。<span class="em">1</span><span class="em">2</span><span class="em">3</span><span class="em">4</span>

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值