Android 修改SVG属性并显示图片(AndroidSvg)

引入依赖:

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ta叫我小白

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值