马黑黑 发表于 2024-9-28 19:18

svg使用emoji图标测试

<p style="margin: 100px; text-align: center;">
<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">&#127809;&#127811;&#127810;&#128174;&#127807;&#127800;&#127809;&#127811;&#127810;&#128174;&#127807;&#127800;</textPath>
        </text>
</svg>
</p>

马黑黑 发表于 2024-9-28 19:19

<h2>一楼svg代码</h2>
<div class="hE"><pre>
&lt;svg width="200px" height="200px"&gt;
        &lt;defs&gt;
                &lt;path id="path" d="M0 100 A100 100 0 1 1 200 100 A100 100 0 1 1 0 100"/&gt;
        &lt;/defs&gt;
        &lt;text dx="20" dy="20" font-size="20" fill="plum" font-family="Arial"&gt;
                &lt;textPath href="#path" textLength="610"&gt;&#127809;&#127811;&#127810;&#128174;&#127807;&#127800;&#127809;&#127811;&#127810;&#128174;&#127807;&#127800;&lt;/textPath&gt;
        &lt;/text&gt;
&lt;/svg&gt;
</pre></div>

<script>
var sc = document.createElement('script');
sc.chartset = 'utf-8';
sc.src = 'https://638183.freep.cn/638183/web/helight/helight.js';
document.body.appendChild(sc);
</script>

马黑黑 发表于 2024-9-28 19:30

<h2>测试：将svg代码用于img图片</h2>
<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">&#127809;&#127811;&#127810;&#128174;&#127807;&#127800;&#127809;&#127811;&#127810;&#128174;&#127807;&#127800;</textPath></text></svg>'/>

马黑黑 发表于 2024-9-28 19:37

<h2>板凳楼代码</h2>
<div class="hE"><pre>
&lt;img width='600' height='600' alt='' src='data:image/svg+xml;charset=utf-8,&lt;svg width="200px" height="200px" xmlns="http://www.w3.org/2000/svg"&gt;&lt;defs&gt;&lt;path id="path" d="M0 100 A100 100 0 1 1 200 100 A100 100 0 1 1 0 100"/&gt;&lt;/defs&gt;&lt;text dx="20" dy="20" font-size="20" fill="red" font-family="Arial"&gt;&lt;textPath href="%23path" textLength="610"&gt;&#127809;&#127811;&#127810;&#128174;&#127807;&#127800;&#127809;&#127811;&#127810;&#128174;&#127807;&#127800;&lt;/textPath&gt;&lt;/text&gt;&lt;/svg&gt;'/&gt;
</pre></div>
<p><br><p>
<p>要点：<br>① img图片标签的 src 赋值，先给出 <mark>data:image/svg+xml;charset=utf-8,</mark> 字串，随后紧跟着svg代码，不能分行、必须写在一行里，同时注意引号——svg使用了双引号，src 赋值引号使用单引号；<br>② svg 中碰上引用 id 时带有 <span style="color: red;">#</span> 号的，需要转义为 <span style="color: red;">%23</span。</p>

马黑黑 发表于 2024-9-28 19:42

还有两个应注意的问题：

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

马黑黑 发表于 2024-9-28 19:42

还有两个应注意的问题：

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

马黑黑 发表于 2024-9-29 08:42

本帖最后由 马黑黑 于 2024-9-29 08:56 编辑 <br /><br /><h2>测试：SVG代码用于元素背景图片</h2>
<h2>失败原因：字符编码导致。需要页面的编码为UTF-8</h2>

红影 发表于 2024-9-29 11:03

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

红影 发表于 2024-9-29 11:04

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

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

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

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

https://img2.baidu.com/it/u=2516181841,320037787&fm=253&fmt=auto&app=138&f=GIF

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

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

还好

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

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


言重了

马黑黑 发表于 2024-9-29 20:04

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

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

醉美水芙蓉 发表于 2024-9-29 20:29

醉美水芙蓉 发表于 2024-9-29 20:29

马黑黑 发表于 2024-9-29 21:27

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

晚上好

红影 发表于 2024-9-29 22:37

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

很漂亮{:4_187:}

红影 发表于 2024-9-29 22:37

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

这样能看到效果，还便于修改，真好{:4_187:}

马黑黑 发表于 2024-9-29 23:49

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

emoji不用转义

红影 发表于 2024-9-30 10:14

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

以后什么都不用转义了才好呢{:4_173:}
页: [1] 2
查看完整版本: svg使用emoji图标测试