引入依赖:
dependencies {
implementation 'com.caverock:androidsvg-aar:1.4'
}
核心代码:
import com.caverock.androidsvg.SVG
import org.w3c.dom.Document
import java.io.StringWriter
import javax.xml.transform.OutputKeys
import javax.xml.transform.TransformerFactory
import javax.xml.transform.dom.DOMSource
import javax.xml.transform.stream.StreamResult
import java.io.InputStream
import javax.xml.parsers.DocumentBuilderFactory
/**
* 打开svg文件并设置(修改)某个属性
*/
fun openSvgAndSetAttribute(
svgInputStream: InputStream,
elementId: String,
attrName: String,
value: String
): SVG {
// 解析 SVG 文件为 Document
val document: Document = DocumentBuilderFactory.newInstance().newDocumentBuilder().parse(svgInputStream)
// 修改某个元素,例如更改颜色
val element = document.getElementById(elementId)
element?.setAttribute(attrName, value) // 将填充色修改为红色
val s = documentToString(document)
return SVG.getFromString(s)
}
/**
* 将 Document 转换为字符串
*/
private fun documentToString(document: Document): String {
val transformer = TransformerFactory.newInstance().newTransformer()
//设置是否省略 XML 声明。OMIT_XML_DECLARATION这是一个常量,表示是否在输出的 XML 文件顶部包含 XML 声明(例如 <?xml version="1.0" encoding="UTF-8"?>)。
transformer.setOutputProperty(OutputKeys.OMIT_XML_DECLARATION, "yes")
//设置是否在生成的 XML 中启用缩进格式。
transformer.setOutputProperty(OutputKeys.INDENT, "yes")
val writer = StringWriter()
transformer.transform(DOMSource(document), StreamResult(writer))
return writer.toString()
}
使用方法:
override fun onCreate(savedInstanceState: Bundle?) {
//代码省略...
val svgImageView = findViewById<SVGImageView>(R.id.svg_image_view)
val svg = openSvgAndSetAttribute(assets.open("example.svg"),"exampleCircle","fill","#00ff00")
// 显示修改后的 SVG
svgImageView.setSVG(svg)
}
布局文件:
<com.caverock.androidsvg.SVGImageView
android:id="@+id/svg_image_view"
android:layout_width="400dp"
android:layout_height="300dp"/>
example.svg 示例:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200" viewBox="0 0 200 200">
<!-- 定义一个矩形 -->
<rect x="10" y="10" width="180" height="180" fill="#87CEEB" stroke="#000" stroke-width="2" />
<!-- 定义一个圆形 -->
<circle id="exampleCircle" cx="100" cy="100" r="50" fill="#FF6347" stroke="#000" stroke-width="2" />
<!-- 定义一条直线 -->
<line x1="50" y1="150" x2="150" y2="50" stroke="#000" stroke-width="2" />
<!-- 添加文本 -->
<text x="50" y="190" font-family="Arial" font-size="14" fill="#000">这是一个示例 SVG</text>
</svg>
如果启用了混淆,需要在 proguard-rules.pro 中添加:
-keep class javax.xml.** { *; }
-keep class org.w3c.dom.** { *; }
-keep class org.xml.sax.** { *; }
假如直接使用如下方式操作元素属性:
// 获取SVG的根元素
val svgRoot = svg.getRootElement()
// 可以进一步操作SVG元素,例如设置宽高等属性
svgRoot.setDocumentWidth("100%")
svgRoot.setDocumentHeight("100%")
则会提示:
Cannot access 'getRootElement': it is package-private in 'SVG'
官网地址:https://bigbadaboom.github.io/androidsvg/index.html