svg使用emoji图标测试

马黑黑

马黑黑

一楼svg代码

<svg width="200px" height="200px">
	<defs>
		<path id="path" d="M0 100 A100 100 0 1 1 200 100 A100 100 0 1 1 0 100"/>
	</defs>
	<text dx="20" dy="20" font-size="20" fill="plum" font-family="Arial">
		<textPath href="#path" textLength="610">🍁🍃🍂💮🌿🌸🍁🍃🍂💮🌿🌸</textPath>
	</text>
</svg>

马黑黑

测试：将svg代码用于img图片

马黑黑

板凳楼代码

<img width='600' height='600' alt='' src='data:image/svg+xml;charset=utf-8,<svg width="200px" height="200px" xmlns="http://www.w3.org/2000/svg"><defs><path id="path" d="M0 100 A100 100 0 1 1 200 100 A100 100 0 1 1 0 100"/></defs><text dx="20" dy="20" font-size="20" fill="red" font-family="Arial"><textPath href="%23path" textLength="610">🍁🍃🍂💮🌿🌸🍁🍃🍂💮🌿🌸</textPath></text></svg>'/>

要点：
① img图片标签的 src 赋值，先给出 data:image/svg+xml;charset=utf-8, 字串，随后紧跟着svg代码，不能分行、必须写在一行里，同时注意引号——svg使用了双引号，src 赋值引号使用单引号；
② svg 中碰上引用 id 时带有 # 号的，需要转义为 %23

马黑黑

还有两个应注意的问题：

① svg代码用于图片或背景图片，svg标签需要有 xmlns 命名空间属性，否则无效；
② textPath 标签的 textLength 属性对文本均匀绕圈的取值，一般是 path 圆的周长减去一点点。圆的周长计算公式为 2πr，即 2*3.14159*半径

马黑黑

还有两个应注意的问题：

① svg代码用于图片或背景图片，svg标签需要有 xmlns 命名空间属性，否则无效；
② textPath 标签的 textLength 属性对文本均匀绕圈的取值，一般是 path 圆的周长减去一点点。圆的周长计算公式为 2πr，即 2*3.14159*半径

马黑黑

测试：SVG代码用于元素背景图片

失败原因：字符编码导致。需要页面的编码为UTF-8

红影

4楼的很奇妙，还可以直接有带代码的svg当图片呢。

红影

6个emoji图标的排布，正好是对称的呢。

起个网名好难

马黑黑 发表于 2024-9-28 19:37
板凳楼代码

<img width='600' height='600' alt='' src='data:image/svg+xml;charset=utf-8,<svg wi ...

                               
登录/注册后可看大图

马黑黑

红影 发表于 2024-9-29 11:04
6个emoji图标的排布，正好是对称的呢。

还好

马黑黑

起个网名好难 发表于 2024-9-29 11:05

言重了

马黑黑

红影 发表于 2024-9-29 11:03
4楼的很奇妙，还可以直接有带代码的svg当图片呢。

如果web页的编码定义为UTF-8，那么，一切更自然

马黑黑

醉美水芙蓉 发表于 2024-9-29 20:29
很漂亮的图图！

晚上好

红影

马黑黑 发表于 2024-9-29 20:03
还好

很漂亮

红影

马黑黑 发表于 2024-9-29 20:04
如果web页的编码定义为UTF-8，那么，一切更自然

这样能看到效果，还便于修改，真好

马黑黑

红影 发表于 2024-9-29 22:37
这样能看到效果，还便于修改，真好

emoji不用转义

红影

马黑黑 发表于 2024-9-29 23:49
emoji不用转义

以后什么都不用转义了才好呢