svg中使用css样式,用CSS给SVG <use>的内容添加样式

SVG图形的一个最常见用例是图标系统,其中最常用的SVG sprite技术就是使用SVG 元素在文档中任意位置“实例化”图标。

一、SVG结构化、分组,以及在SVG中引用(重用)元素速览

SVG中有四个主要的元素用于在文档中定义、结构化和引用SVG代码:, , 和 。

元素(“group”的简写),用于给逻辑上相联系的图形元素分组。

元素用来定义你之后要重用的元素。

元素结合了和元素的优点,将定义模板的元素组合在一起,以便之后在文档中的其他位置引用。比其它两个元素有一个非常重要的优点:它接受一个viewBox属性,可以让它在任何视窗中自适应大小缩放渲染。

元素用于引用文档中其它位置定义的元素。你可以重用已有的元素,类似于图形编辑器中的复制粘贴功能。它可以重用单个元素,也可以重用一组用、或定义的元素。

要使用一个元素,你需要通过一个标识对该元素进行引用——一个ID,即use中的xlink:href属性,以及用来给该元素定位的x和y属性。你可以给use元素应用样式,这些样式也会级联应用到use元素的内容中去。

二、 SVG 及shadow DOM

当你使用引用元素时,代码如下:

元素只是一个元素,它是自闭合的。在use标签的开闭区间内没有任何内容,所以的内容是克隆到Shadow DOM,不能使用普通的CSS选择器来获取shadow DOM。

三、控制svg得样式

因为SVG元素可以使用CSS通过三种不同的方法之一进行添加样式:

外部的CSS样式(在外部的CSS文件中)

内部样式块(

内联样式(在元素的style属性中)。

除了CSS属性,SVG元素还可以使用描述属性添加样式。描述属性是在元素上设置CSS属性的简写方式。可以认为它们是特殊的样式属性。它们的目的就是给样式级联做贡献

SVG规范列出了可以设置为CSS属性的SVG属性。

四、CSS描述属性值的介绍(给一个svg指定两种不同得颜色)

使用CSSinherit关键字给的内容添加样式

通过给svg 图形元素设置fill= inherit 图形元素得颜色会自动集成父级fill得颜色

2.使用CSS的currentColor变量来给内容添加样式

通过给svg 图形元素设置fill= currentColor 图形元素得颜色会自动集成父级color得颜色

通过这两种技术可以给一个元素指定两种不同的颜色,而不仅是一种

五、 使用CSS 变量给内容添加样式(给一个svg指定两种以上得不同颜色)

使用CSS变量,你可以给的内容添加样式

内联style标签会覆盖描述属性,支持CSS变量的浏览器会使用这些变量作为图形的填充颜色。不支持CSS变量的浏览器将使用fill属性值。

使用use实例化上述svg

定义颜色变量到use上

变量将会定义在use上,这样它们会被级联到内容上。你给变量选的颜色将会构成你的插画内容的颜色主题。所以,对于上面的机器人,构成图形有三种主要的颜色,我把它们命名为primary、secondary和tertiary。

#robot-1 {

--primary-color: #0099CC;

--secondary-color: #FFDF34;

--tertiary-color: #333;

}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
众所周知,人工智能是当前最热门的话题之一, 计算机技术与互联网技术的快速发展更是将对人工智能的研究推向一个新的高潮。 人工智能是研究模拟和扩展人类智能的理论与方法及其应用的一门新兴技术科学。 作为人工智能核心研究领域之一的机器学习, 其研究动机是为了使计算机系统具有人的学习能力以实现人工智能。 那么, 什么是机器学习呢? 机器学习 (Machine Learning) 是对研究问题进行模型假设,利用计算机从训练数据学习得到模型参数,并最终对数据进行预测和分析的一门学科。 机器学习的用途 机器学习是一种通用的数据处理技术,其包含了大量的学习算法。不同的学习算法在不同的行业及应用能够表现出不同的性能和优势。目前,机器学习已成功地应用于下列领域: 互联网领域----语音识别、搜索引擎、语言翻译、垃圾邮件过滤、自然语言处理等 生物领域----基因序列分析、DNA 序列预测、蛋白质结构预测等 自动化领域----人脸识别、无人驾驶技术、图像处理、信号处理等 金融领域----证券市场分析、信用卡欺诈检测等 医学领域----疾病鉴别/诊断、流行病爆发预测等 刑侦领域----潜在犯罪识别与预测、模拟人工智能侦探等 新闻领域----新闻推荐系统等 游戏领域----游戏战略规划等 从上述所列举的应用可知,机器学习正在成为各行各业都会经常使用到的分析工具,尤其是在各领域数据量爆炸的今天,各行业都希望通过数据处理与分析手段,得到数据有价值的信息,以便明确客户的需求和指引企业的发展。
众所周知,人工智能是当前最热门的话题之一, 计算机技术与互联网技术的快速发展更是将对人工智能的研究推向一个新的高潮。 人工智能是研究模拟和扩展人类智能的理论与方法及其应用的一门新兴技术科学。 作为人工智能核心研究领域之一的机器学习, 其研究动机是为了使计算机系统具有人的学习能力以实现人工智能。 那么, 什么是机器学习呢? 机器学习 (Machine Learning) 是对研究问题进行模型假设,利用计算机从训练数据学习得到模型参数,并最终对数据进行预测和分析的一门学科。 机器学习的用途 机器学习是一种通用的数据处理技术,其包含了大量的学习算法。不同的学习算法在不同的行业及应用能够表现出不同的性能和优势。目前,机器学习已成功地应用于下列领域: 互联网领域----语音识别、搜索引擎、语言翻译、垃圾邮件过滤、自然语言处理等 生物领域----基因序列分析、DNA 序列预测、蛋白质结构预测等 自动化领域----人脸识别、无人驾驶技术、图像处理、信号处理等 金融领域----证券市场分析、信用卡欺诈检测等 医学领域----疾病鉴别/诊断、流行病爆发预测等 刑侦领域----潜在犯罪识别与预测、模拟人工智能侦探等 新闻领域----新闻推荐系统等 游戏领域----游戏战略规划等 从上述所列举的应用可知,机器学习正在成为各行各业都会经常使用到的分析工具,尤其是在各领域数据量爆炸的今天,各行业都希望通过数据处理与分析手段,得到数据有价值的信息,以便明确客户的需求和指引企业的发展。
### 回答1: 这是一个 Vue 组件的代码,主要用于显示一个 SVG 图标。其,`<template>` 标签表示这是一个 Vue 模板,`<svg>` 标签表示要显示的 SVG 图标,并绑定了一些属性和事件监听器,`:class` 表示绑定了一个 CSS 类名,`:xlink:href` 表示绑定了一个 SVG 的链接地址。`<use>` 标签用于引用 SVG 图标的链接地址。这个组件可以在 Vue 应用使用,通过传入不同的 `iconName` 和 `svgClass` 参数,来显示不同的 SVG 图标。 ### 回答2: 这段代码是一个Vue组件的模板。它在页面上渲染一个SVG图标。具体解释如下: `<template>`标签用来定义这个组件的模板内容,它是Vue组件必须的部分。 `<svg>`标签是HTML用来定义可缩放矢量图形的元素。在这个组件,它被用来渲染一个SVG图标。 `:class="svgClass"`是Vue的动态绑定语法,用来根据组件的数据来动态设置SVG元素的class属性。 `aria-hidden="true"`是一个用来辅助无障碍访问的属性,表明这个SVG图标对屏幕阅读器是不可见的。 `v-on="$listeners"`是Vue提供的一个特殊属性,将组件的所有事件监听器直接绑定到模板的根元素上,可以简化组件事件监听的代码。 `<use>`标签是SVG的一个元素,用来在同一个SVG文件重复使用已经定义好的图形元素。`:xlink:href`是Vue的动态绑定语法,用来根据组件的数据动态设置`<use>`元素的`xlink:href`属性。 总结起来,这段代码是一个Vue组件的模板,用来渲染一个SVG图标。它可以根据组件的数据动态设置SVG元素的class属性、重复使用已经定义好的图形元素,并将组件的事件监听器绑定到SVG元素上,以提供更灵活的功能。 ### 回答3: 这是一个Vue组件的模板,用于生成一个SVG图标。在模板使用了Vue的动态绑定语法和事件监听器。其,`:class="svgClass"`属性用于动态绑定CSS样式,`:xlink:href="iconName"`属性用于动态绑定SVG图标的引用路径。 模板的`<use>`标签用于引用SVG图标文件,并将其渲染到`<svg>`标签。`<svg>`标签具有`aria-hidden="true"`属性,用于隐藏此图标可访问性。 通过绑定类样式和图标引用路径,可以根据需求来展示不同的SVG图标。而通过监听事件,可以实现对图标的交互操作。这样,我们可以复用这个模板,创建多个具有不同样式和功能的SVG图标组件。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值