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

字数 1027阅读 692

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

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

SVG中有四个主要的元素用于在文档中定义、结构化和引用SVG代码:<g>, <defs>, <use><symbol>

  1. <g>元素(“group”的简写),用于给逻辑上相联系的图形元素分组。
  2. <defs>元素用来定义你之后要重用的元素。
  3. <symbol>元素结合了<defs><g>元素的优点,将定义模板的元素组合在一起,以便之后在文档中的其他位置引用。比其它两个元素有一个非常重要的优点:它接受一个viewBox属性,可以让它在任何视窗中自适应大小缩放渲染。
  4. <use>元素用于引用文档中其它位置定义的元素。你可以重用已有的元素,类似于图形编辑器中的复制粘贴功能。它可以重用单个元素,也可以重用一组用<g><defs><symbol>定义的元素。

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

二、 SVG <use>及shadow DOM

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

<symbol id="check" viewBox="0 0 40 40"> 
<!-- icon content / shapes here --> 
</symbol> 

<use xlink:href="#check" x="100" y="300" />

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

三、控制svg得样式

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

    1. 外部的CSS样式(在外部的CSS文件中)
    1. 内部样式块(<style>元素包裹),
    1. 内联样式(在元素的style属性中)。

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

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

    1. 使用CSSinherit关键字<use>的内容添加样式
      通过给svg 图形元素设置fill= inherit 图形元素得颜色会自动集成父级fill得颜色
  • 2.使用CSS的currentColor变量来给<use>内容添加样式
    通过给svg 图形元素设置fill= currentColor 图形元素得颜色会自动集成父级color得颜色

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

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

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

<svg>
  <symbol id="robot" viewBox="0 0 340 536">
    <path d="..." fill="#1E8F90" style="fill: var(--primary-color)" /> 
    <path d="..." fill="#1E8F90" style="fill: var(--primary-color)" /> 
    <path d="..." fill="#6A4933" style="fill: var(--tertiary-color)" /> 
    <path d="..." fill="#1E8F90" style="fill: var(--primary-color)" />
  </symbol>
</svg>

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

  1. 使用use实例化上述svg
<svg width="340" height="536"> 
  <use xlink:href="#robot" id="robot-1" />
</svg>
  1. 定义颜色变量到use上

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

#robot-1 { 
  --primary-color: #0099CC; 
  --secondary-color: #FFDF34; 
  --tertiary-color: #333; 
}

推荐阅读更多精彩内容

  • @(HTML5)[canvas与SVG] [TOC] 十一 、SVG HTML体系中,最常用的绘制矢量图的技术是S...
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
  • $HTML, HTTP,web综合问题 1、前端需要注意哪些SEO 2、 的title和alt有什么区别 3、HT...
  • 第一章 HTML5 (2014年10月29日发布)新特性: 10个 (1)新的语义标签 (2)增强型表单 (3)视...