Lightning 中使用SVG

最新推荐文章于 2025-08-09 10:17:13 发布

转载最新推荐文章于 2025-08-09 10:17:13 发布 · 136 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/SpringZhang/blog/1614042

文章标签：

#python #java

本文介绍了SVG（可伸缩矢量图形）的基本概念及其相对于JPEG和GIF等格式的优势，并详细探讨了如何在Salesforce Lightning中使用SVG图标，包括自定义SVG图标的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2019独角兽企业重金招聘Python工程师标准>>>

Lightning 中使用SVG

1. SVG的定义

SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
SVG 用来定义用于网络的基于矢量的图形
SVG 使用 XML 格式定义图形
SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
SVG 是万维网联盟的标准
SVG 与诸如 DOM和 XSL 之类的W3C标准是一个整体

2. 与其他图像格式相比，使用 SVG 的优势在于：

SVG 可被非常多的工具读取和修改（比如记事本）
SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强。
SVG 是可伸缩的
SVG 图像可在任何的分辨率下被高质量地打印
SVG 可在图像质量不下降的情况下被放大
SVG 图像中的文本是可选的，同时也是可搜索的（很适合制作地图）
SVG 可以与 Java 技术一起运行
SVG 是开放的标准
SVG 文件是纯粹的 XML

以上引用百度百科

3. Lightning中使用SVG

这里不讨论SVG本身的知识,W3C上有文章描述,另外有两篇博客的介绍SVG图标颜色文字般继承与填充,SVG Sprite技术介绍
在页面中,我们经常使用一图标增加页面的美观,有些图标被我们大家授受,这样就可以省略掉文本,毕竟图片更形象
之前我们用的更多的是用png之类的图片通过img引用,一来,需要通过ps处理成合适的尺寸,如果在Img上通过宽度与高度会使图片变形
上面的优点中,提到与jpeg/gif相比,尺寸更小,svg的文件本身是xml格式描述,如下图,是SF提供的标准的SVG
SLDS中下载SLDS包,在如下截图中存放的ICON,SF提供了SVG也提供了2种不同尺寸的png
html5中嵌入SVG方法有多种具体度娘

a. 直接写svg b. 通过img引用 c. CSS方法

效果图
SVG Sprite与symbol元素将svg放到一个文件中,通过use元素引用如图是SFAction中的svg 在目录action-sprite中svg symbols.svg
使用:lightning:icon 标签引用,通过class 修改背景颜色,暂时没有找到是不是可以引用自定义svg(看了文档只能引用标准的SLDS定义好的)

Lightning组件中不能直接像html5中写svg,在google上找到一段代码,通过这个组件引用自定义的svg.看了下代码,当在页面渲染完通过js生成拼接成html代码嵌入到页面中.

svgIcon.cmp

 <aura:component description="svgIcon">
 	<aura:attribute name="svgPath" default="" type="String" description="the path for the icon in the static resource, this will be use in a SVG use tag" />
 	<aura:attribute name="name"           default="" type="String" description="Symbol name of icon" />
 	<aura:attribute name="class"          default="" type="String" description="the class of this SVG tag, can be use for CSS purpose" />
 	<aura:attribute name="containerClass" default="" type="String" description="Container class name for span container of icon" />
 	<aura:attribute name="category"       default="" type="String" description="Category of icon- action, standard, utility etc." />
 	<aura:attribute name="size"           default="" type="String" description="Size of icon-- small, medium, large" />
 	<aura:attribute name="assistiveText"  default="" type="String" description="Description name of icon" />
 	<span aura:id="container" class="{!v.containerClass}">
 		<span aura:id="assistiveText" class="slds-assistive-text">{!v.assistiveText}</span>
 	</span>
 </aura:component>

svgIconHelper.js

 ({
   renderIcon: function(component) {
     var prefix = "slds-";
     var svgns = "http://www.w3.org/2000/svg";
     var xlinkns = "http://www.w3.org/1999/xlink";
     var size = component.get("v.size");
     var name = component.get("v.name");
     var classname = component.get("v.class");
     var containerclass = component.get("v.containerClass");
     var category = component.get("v.category");

     var containerClassName = [
       prefix+"icon_container",
       prefix+"icon-"+category+"-"+name,
       containerclass
     ].join(' ');
     component.set("v.containerClass", containerClassName);

     var svgroot = document.createElementNS(svgns, "svg");
     var iconClassName = prefix+"icon "+prefix+"icon--" + size+" "+classname;
     svgroot.setAttribute("aria-hidden", "true");
     svgroot.setAttribute("class", iconClassName);
     svgroot.setAttribute("name", name);

     // Add an "href" attribute (using the "xlink" namespace)
     var shape = document.createElementNS(svgns, "use");
     shape.setAttributeNS(xlinkns, "href", component.get("v.svgPath"));
     svgroot.appendChild(shape);

     var container = component.find("container").getElement();
     container.insertBefore(svgroot, container.firstChild);
   }
 })

svgIconRenderer.js

 	({
 	  render: function(component, helper) {
 	    // By default, after the component finished loading data/handling events,
 	    // it will call this render function this.superRender() will call the
 	    // render function in the parent component.
 	    var ret = this.superRender();

 	    // Calls the helper function to append the SVG icon
 	    helper.renderIcon(component);
 	    return ret;
 	  }
 	})