一個能把code轉換成svg的BBCode

留言板
回复
头像
ejsoon
圈圈精英
圈圈精英
帖子: 4188
注册时间: 2022年 11月 18日 17:36
为圈友点赞: 165 次
被圈友点赞: 195 次
联系:

一個能把code轉換成svg的BBCode

帖子 ejsoon »

功能描述:把這個bbcode放到[ code]<svg>...</svg>[ /code]後面,則svg圖片會直接顯示。

bbcode:

代码: 全选

[svg={UINT?}]
html:

代码: 全选

<img style="max-width: 100%; box-sizing: border-box; width: auto; height: auto;" width="36" height="36" 
     src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNiIgaGVpZ2h0PSIzNiI+PGNpcmNsZSBjeD0iMTgiIGN5PSIxOCIgcj0iMTIiIGZpbGw9Im5vbmUiIHN0cm9rZT0iYmx1ZSIgc3Ryb2tlLXdpZHRoPSIyIi8+PC9zdmc+" 
     onload="
        (function(img){
                // 1. Find the first previous 'div.codebox'
                var codebox = img.previousElementSibling;
                while(codebox && !codebox.classList.contains('codebox')){
                    codebox = codebox.previousElementSibling;
                }
                if(!codebox) return;

                // 2. Get <code> innerHTML
                var codeElem = codebox.querySelector('code');
                if(!codeElem) return;
                var codeHTML = codeElem.innerHTML.trim();

                // 3. Check if it ends with &lt;/svg&gt;
                if(!codeHTML.endsWith('&' + 'lt;/svg&' + 'gt;')){
                    img.remove();
                    return;
                }

                // 4. Replace &lt; and &gt; with < and >
                var reLt = new RegExp('&' + 'lt;', 'g');
                var reGt = new RegExp('&' + 'gt;', 'g');
                var svgText = codeHTML.replace(reLt,'<').replace(reGt,'>');

                // 5. Parse SVG
                var parser = new DOMParser();
                var doc = parser.parseFromString(svgText,'image/svg+xml');
                var svg = doc.documentElement;
                if(svg.hasAttribute('width') && svg.hasAttribute('height')){
                    img.width = parseFloat(svg.getAttribute('width'));
                    img.height = parseFloat(svg.getAttribute('height'));
                }

                // 6. Convert SVG to base64 and assign to img.src
                var serializer = new XMLSerializer();
                var svgStr = serializer.serializeToString(svg);
                var b64 = btoa(unescape(encodeURIComponent(svgStr)));
                img.onload = null;
                img.src = 'data:image/svg+xml;base64,' + b64;

                // 7. Display the svg code or not
                if ('{UINT}' !== '1') {
                    codebox.style.display = 'none';
                }

        })(this);
     ">
tips:

代码: 全选

Place this bbcode after a [ code]<svg>...</svg>[ /code] to display svg image.
原理是用img的onload事件觸發,svg轉成base64之後放進img的src中。因此不會有安全風險。

如果是[ svg],則其上方的[ code]會隱藏。
如果是[ svg=1],則其上方的[ code]會顯示。
上次由 ejsoon 在 2025年 12月 2日 18:00,总共编辑 5 次。
https://ejsoon.vip/
弈趣極光:享受思維樂趣
头像
ejsoon
圈圈精英
圈圈精英
帖子: 4188
注册时间: 2022年 11月 18日 17:36
为圈友点赞: 165 次
被圈友点赞: 195 次
联系:

Re: 一個能把code轉換成svg的BBCode

帖子 ejsoon »

可用以下代碼測試:

代码: 全选

<svg id="etani" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" width="480" height="480"> <defs mode="1" rotatestep="1" displaywait="1" stepvalue="30" snapto="1"> <g id="tile0" frontfill="#f54f56" backfill="#f54f56"><path d="M 9,15.588 L -27,15.588 L -63,15.588 L -45,-15.589 L -9,-15.589 L 27,-15.589 L 63,-15.589 L 45,15.588 Z"/></g><g id="tile1" frontfill="#de90eb" backfill="#de90eb"><path d="M 0,0 L 18,-31.177 L 36,0 L 54,31.177 L 18,31.177 L -18,31.177 L -54,31.177 L -36,0 Z"/></g><g id="tile2" frontfill="#7786ce" backfill="#7786ce"><path d="M 0,-15.588 L 18,-46.765 L 36,-15.588 L 18,15.589 L 0,46.766 L -18,15.589 L -36,-15.588 L -18,-46.765 Z"/></g><g id="tile3" frontfill="#bb5600" backfill="#bb5600"><path d="M 0,0 L -18,-31.177 L 18,-31.177 L 36,0 L 18,31.177 L -18,31.177 L -54,31.177 L -36,0 Z"/></g><g id="tile4" frontfill="#ece43a" backfill="#ece43a"><path d="M 18,31.177 L -18,31.177 L -36,0 L -18,-31.177 L 18,-31.177 L 36,0 Z"/></g><g id="tile5" frontfill="#f758b8" backfill="#f758b8"><path d="M 18,0 L 0,31.177 L -36,31.177 L -54,0 L -18,0 L 0,-31.177 L 36,-31.177 L 54,0 Z"/></g><g id="tile6" frontfill="#77d1e4" backfill="#77d1e4"><path d="M 18,0 L 36,-31.177 L 54,0 L 36,31.177 L 0,31.177 L -36,31.177 L -54,0 L -18,0 Z"/></g><g id="tile7" frontfill="#9caec6" backfill="#9caec6"><path d="M 0,0 L -31.177,18 L -62.354,0 L -31.177,-18 L 0,-36 L 31.177,-18 L 62.354,0 L 31.177,18 Z"/></g><g id="tile8" frontfill="#b0c350" backfill="#b0c350"><path d="M 9,0 L 45,0 L 27,31.177 L -9,31.177 L -45,31.177 L -27,0 L -45,-31.177 L -9,-31.177 Z"/></g><g id="tile9" frontfill="#1c47d1" backfill="#1c47d1"><path d="M 18,0 L 36,31.177 L 0,31.177 L -36,31.177 L -18,0 L -36,-31.177 L 0,-31.177 L 36,-31.177 Z"/></g><g id="tile10" frontfill="#f3a354" backfill="#f3a354"><path d="M 9,0 L 27,31.177 L -9,31.177 L -45,31.177 L -27,0 L -9,-31.177 L 27,-31.177 L 45,0 Z"/></g><g id="tile11" frontfill="#94e49a" backfill="#94e49a"><path d="M 18,0 L 54,0 L 36,31.177 L 0,31.177 L -36,31.177 L -54,0 L -18,0 L 0,-31.177 Z"/></g></defs> <g stroke-linejoin="round" class="etdrop" stroke="#777" stroke-width="2" transform="translate(-623.942,27.07) scale(1.361)" id="etanidrop"> <g class="etboard"/><use href="#tile3" fill="#bb5600" stroke="#777" transform="translate(605.413,128.804) scale(1,1) rotate(-120)" class="tiledropped"/><use href="#tile7" fill="#9caec6" stroke="#777" transform="translate(569.413,191.158) scale(1,1) rotate(30)" class="tiledropped"/><use href="#tile5" fill="#f758b8" stroke="#777" transform="translate(542.413,206.747) scale(1,1) rotate(-120)" class="tiledropped"><animateTransform attributeName="transform" attributeType="XML" dur="3s" type="translate" values="542.413,206.746;542.413,206.746;704.414,269.1;704.414,269.1;542.413,206.746" repeatCount="indefinite"/><animateTransform attributeName="transform" attributeType="XML" dur="3s" type="scale" values="1,1;1,1;-1,1;-1,1;1,1" additive="sum" repeatCount="indefinite"/><animateTransform attributeName="transform" attributeType="XML" dur="3s" type="rotate" values="-120;-120;60;60;-120" additive="sum" repeatCount="indefinite"/></use><use href="#tile4" fill="#ece43a" stroke="#777" transform="translate(605.414,253.512) scale(1,1) rotate(0)" class="tiledropped"/><use href="#tile2" fill="#7786ce" stroke="#777" transform="translate(672.913,230.129) scale(1,1) rotate(-60)" class="tiledropped"/><use href="#tile1" fill="#de90eb" stroke="#777" transform="translate(677.413,128.804) scale(1,1) rotate(180)" class="tiledropped"/><use href="#tile6" fill="#77d1e4" stroke="#777" transform="translate(686.413,206.747) scale(1,1) rotate(-120)" class="tiledropped"/><use href="#tile8" fill="#b0c350" stroke="#777" transform="translate(708.913,136.598) scale(1,1) rotate(-60)" class="tiledropped"/><use href="#tile9" fill="#1c47d1" stroke="#777" transform="translate(551.413,128.804) scale(-1,1) rotate(0)" class="tiledropped"/><use href="#tile0" fill="#f54f56" stroke="#777" transform="translate(578.413,82.039) scale(1,1) rotate(0)" class="tiledropped"/><use href="#tile10" fill="#f3a354" stroke="#777" transform="translate(650.413,66.45) scale(-1,1) rotate(0)" class="tiledropped"/><use href="#tile11" fill="#94e49a" stroke="#777" transform="translate(632.413,175.569) scale(-1,1) rotate(-60)" class="tilesnapped tiledropped"/> </g> </svg>
[ svg]

原[ code]會被替換。
https://ejsoon.vip/
弈趣極光:享受思維樂趣
头像
圈宝
圈圈守护者
圈圈守护者
帖子: 133
注册时间: 2020年 12月 4日 20:46
我的状态: 🎯
为圈友点赞: 112 次
被圈友点赞: 20 次

Re: 一個能把code轉換成svg的BBCode

帖子 圈宝 »

已添加。

代码: 全选

<svg id="etani" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" width="480" height="480"> <defs mode="1" rotatestep="1" displaywait="1" stepvalue="30" snapto="1"> <g id="tile0" frontfill="#f54f56" backfill="#f54f56"><path d="M 9,15.588 L -27,15.588 L -63,15.588 L -45,-15.589 L -9,-15.589 L 27,-15.589 L 63,-15.589 L 45,15.588 Z"/></g><g id="tile1" frontfill="#de90eb" backfill="#de90eb"><path d="M 0,0 L 18,-31.177 L 36,0 L 54,31.177 L 18,31.177 L -18,31.177 L -54,31.177 L -36,0 Z"/></g><g id="tile2" frontfill="#7786ce" backfill="#7786ce"><path d="M 0,-15.588 L 18,-46.765 L 36,-15.588 L 18,15.589 L 0,46.766 L -18,15.589 L -36,-15.588 L -18,-46.765 Z"/></g><g id="tile3" frontfill="#bb5600" backfill="#bb5600"><path d="M 0,0 L -18,-31.177 L 18,-31.177 L 36,0 L 18,31.177 L -18,31.177 L -54,31.177 L -36,0 Z"/></g><g id="tile4" frontfill="#ece43a" backfill="#ece43a"><path d="M 18,31.177 L -18,31.177 L -36,0 L -18,-31.177 L 18,-31.177 L 36,0 Z"/></g><g id="tile5" frontfill="#f758b8" backfill="#f758b8"><path d="M 18,0 L 0,31.177 L -36,31.177 L -54,0 L -18,0 L 0,-31.177 L 36,-31.177 L 54,0 Z"/></g><g id="tile6" frontfill="#77d1e4" backfill="#77d1e4"><path d="M 18,0 L 36,-31.177 L 54,0 L 36,31.177 L 0,31.177 L -36,31.177 L -54,0 L -18,0 Z"/></g><g id="tile7" frontfill="#9caec6" backfill="#9caec6"><path d="M 0,0 L -31.177,18 L -62.354,0 L -31.177,-18 L 0,-36 L 31.177,-18 L 62.354,0 L 31.177,18 Z"/></g><g id="tile8" frontfill="#b0c350" backfill="#b0c350"><path d="M 9,0 L 45,0 L 27,31.177 L -9,31.177 L -45,31.177 L -27,0 L -45,-31.177 L -9,-31.177 Z"/></g><g id="tile9" frontfill="#1c47d1" backfill="#1c47d1"><path d="M 18,0 L 36,31.177 L 0,31.177 L -36,31.177 L -18,0 L -36,-31.177 L 0,-31.177 L 36,-31.177 Z"/></g><g id="tile10" frontfill="#f3a354" backfill="#f3a354"><path d="M 9,0 L 27,31.177 L -9,31.177 L -45,31.177 L -27,0 L -9,-31.177 L 27,-31.177 L 45,0 Z"/></g><g id="tile11" frontfill="#94e49a" backfill="#94e49a"><path d="M 18,0 L 54,0 L 36,31.177 L 0,31.177 L -36,31.177 L -54,0 L -18,0 L 0,-31.177 Z"/></g></defs> <g stroke-linejoin="round" class="etdrop" stroke="#777" stroke-width="2" transform="translate(-623.942,27.07) scale(1.361)" id="etanidrop"> <g class="etboard"/><use href="#tile3" fill="#bb5600" stroke="#777" transform="translate(605.413,128.804) scale(1,1) rotate(-120)" class="tiledropped"/><use href="#tile7" fill="#9caec6" stroke="#777" transform="translate(569.413,191.158) scale(1,1) rotate(30)" class="tiledropped"/><use href="#tile5" fill="#f758b8" stroke="#777" transform="translate(542.413,206.747) scale(1,1) rotate(-120)" class="tiledropped"><animateTransform attributeName="transform" attributeType="XML" dur="3s" type="translate" values="542.413,206.746;542.413,206.746;704.414,269.1;704.414,269.1;542.413,206.746" repeatCount="indefinite"/><animateTransform attributeName="transform" attributeType="XML" dur="3s" type="scale" values="1,1;1,1;-1,1;-1,1;1,1" additive="sum" repeatCount="indefinite"/><animateTransform attributeName="transform" attributeType="XML" dur="3s" type="rotate" values="-120;-120;60;60;-120" additive="sum" repeatCount="indefinite"/></use><use href="#tile4" fill="#ece43a" stroke="#777" transform="translate(605.414,253.512) scale(1,1) rotate(0)" class="tiledropped"/><use href="#tile2" fill="#7786ce" stroke="#777" transform="translate(672.913,230.129) scale(1,1) rotate(-60)" class="tiledropped"/><use href="#tile1" fill="#de90eb" stroke="#777" transform="translate(677.413,128.804) scale(1,1) rotate(180)" class="tiledropped"/><use href="#tile6" fill="#77d1e4" stroke="#777" transform="translate(686.413,206.747) scale(1,1) rotate(-120)" class="tiledropped"/><use href="#tile8" fill="#b0c350" stroke="#777" transform="translate(708.913,136.598) scale(1,1) rotate(-60)" class="tiledropped"/><use href="#tile9" fill="#1c47d1" stroke="#777" transform="translate(551.413,128.804) scale(-1,1) rotate(0)" class="tiledropped"/><use href="#tile0" fill="#f54f56" stroke="#777" transform="translate(578.413,82.039) scale(1,1) rotate(0)" class="tiledropped"/><use href="#tile10" fill="#f3a354" stroke="#777" transform="translate(650.413,66.45) scale(-1,1) rotate(0)" class="tiledropped"/><use href="#tile11" fill="#94e49a" stroke="#777" transform="translate(632.413,175.569) scale(-1,1) rotate(-60)" class="tilesnapped tiledropped"/> </g> </svg>
以下圈友为 圈宝 的帖子点了赞:
ejsoon
当时明月在,曾照彩云归
头像
ejsoon
圈圈精英
圈圈精英
帖子: 4188
注册时间: 2022年 11月 18日 17:36
为圈友点赞: 165 次
被圈友点赞: 195 次
联系:

Re: 一個能把code轉換成svg的BBCode

帖子 ejsoon »

圈宝 写了: 2025年 11月 30日 17:01 已添加。
非常感謝!
https://ejsoon.vip/
弈趣極光:享受思維樂趣
头像
ejsoon
圈圈精英
圈圈精英
帖子: 4188
注册时间: 2022年 11月 18日 17:36
为圈友点赞: 165 次
被圈友点赞: 195 次
联系:

更新: 一個能把code轉換成svg的BBCode

帖子 ejsoon »

更新,加了「顯示或隱藏svg code」的選項。

如果[ svg=1],則會顯示原來的svg code,而默認是隱藏的。

另加上了width=auto; height=auto,以使圖片比例不會失真。

在我的本地測試通過。希望可以更新下。
上次由 ejsoon 在 2025年 12月 2日 11:23,总共编辑 1 次。
https://ejsoon.vip/
弈趣極光:享受思維樂趣
头像
圈宝
圈圈守护者
圈圈守护者
帖子: 133
注册时间: 2020年 12月 4日 20:46
我的状态: 🎯
为圈友点赞: 112 次
被圈友点赞: 20 次

Re: 更新: 一個能把code轉換成svg的BBCode

帖子 圈宝 »

ejsoon 写了: 2025年 12月 1日 14:17 在我的本地測試通過。希望可以更新下
我这边测试,没有隐藏。
图片
当时明月在,曾照彩云归
头像
ejsoon
圈圈精英
圈圈精英
帖子: 4188
注册时间: 2022年 11月 18日 17:36
为圈友点赞: 165 次
被圈友点赞: 195 次
联系:

Re: 更新: 一個能把code轉換成svg的BBCode

帖子 ejsoon »

圈宝 写了: 2025年 12月 1日 22:06
ejsoon 写了: 2025年 12月 1日 14:17 在我的本地測試通過。希望可以更新下
我这边测试,没有隐藏。
图片
[ svg]:這樣就會隱藏。
[ svg=1]:這樣會顯示。

所隱藏和顯示的是它上面的[ code]。
以下圈友为 ejsoon 的帖子点了赞:
圈宝
https://ejsoon.vip/
弈趣極光:享受思維樂趣
头像
圈宝
圈圈守护者
圈圈守护者
帖子: 133
注册时间: 2020年 12月 4日 20:46
我的状态: 🎯
为圈友点赞: 112 次
被圈友点赞: 20 次

Re: 更新: 一個能把code轉換成svg的BBCode

帖子 圈宝 »

ejsoon 写了: 2025年 12月 1日 22:31 所隱藏和顯示的是它上面的[ code]。
脑袋糊涂了🥴,没认真看代码。。。 :grin: :lol:

已使用新提供的代码。
当时明月在,曾照彩云归
头像
ejsoon
圈圈精英
圈圈精英
帖子: 4188
注册时间: 2022年 11月 18日 17:36
为圈友点赞: 165 次
被圈友点赞: 195 次
联系:

Re: 一個能把code轉換成svg的BBCode

帖子 ejsoon »

重要更新:
一,每次打開含有這個bbcode的頁面,加載進度條會一直存在。

問了chatgpt,才知道如果src改動,onload會再次觸發,造成死循環。

解決方法是在改動img.src前添加img.onload=null。

二,一些svg的開頭並不是「<svg」,而可能是XML文件頭。

因此改為判斷文件結尾是不是「</svg>」。

三,一些svg的width和height加了px或mm等單位。

width和height屬性應該是沒有單位的,因此加上parseFloat()。

@圈宝,非常抱歉,希望是最後一次更新了。我已經把代碼更新到了一樓。
上次由 ejsoon 在 2025年 12月 2日 11:51,总共编辑 2 次。
以下圈友为 ejsoon 的帖子点了赞:
圈宝
https://ejsoon.vip/
弈趣極光:享受思維樂趣
头像
ejsoon
圈圈精英
圈圈精英
帖子: 4188
注册时间: 2022年 11月 18日 17:36
为圈友点赞: 165 次
被圈友点赞: 195 次
联系:

Re: 一個能把code轉換成svg的BBCode

帖子 ejsoon »

一個含有XML文件頭的SVG:

代码: 全选

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="280mm" width="484.97mm" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1718.4126 992.12598" xmlns:dc="http://purl.org/dc/elements/1.1/">
<defs>
<clipPath id="c" clipPathUnits="userSpaceOnUse">
<rect opacity="0.602" height="1984.3" width="3436.8" y="308.27" x="-1288.8" fill="#999"/>
</clipPath>
</defs>
<g transform="translate(429.6 -804.33)">
<g transform="matrix(.5 0 0 .5 214.8 650.2)" clip-path="url(#c)">
<path id="b" d="m-1166.1 308.27-122.74 70.867v141.73l-122.74 70.865 122.74 70.867 122.74-70.867 122.74 70.867v-141.73l-122.74-70.867v-141.73z" fill-rule="evenodd" fill="#800000"/>
<path id="a" d="m-1043.3 662.6 122.74-70.867v-141.73l122.74-70.865-122.74-70.867-122.74 70.867-122.74-70.867v141.73l122.74 70.867v141.73z" fill-rule="evenodd" fill="#ffe25e"/>
<use xlink:href="#b" transform="translate(245.49 -283.47)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#b" transform="translate(-122.74 637.8)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#b" transform="translate(1104.7 212.6)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#b" transform="translate(1472.9 283.46)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#b" transform="translate(1963.9 708.66)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#b" transform="translate(2086.6 70.866)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#b" transform="translate(3191.3 283.46)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#b" transform="translate(122.74 354.33)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#b" transform="translate(490.98 425.2)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#b" transform="translate(981.95 850.39)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#b" transform="translate(1472.9 1275.6)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#b" transform="translate(2086.6 1063)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#b" transform="translate(2454.9 141.73)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#b" transform="translate(2332.1 779.53)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#b" transform="translate(245.49 708.66)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#b" transform="translate(613.72 779.53)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#b" transform="translate(736.46 1133.9)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#b" transform="translate(1227.4 1559.1)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#b" transform="translate(2700.4 1842.5)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#b" transform="translate(2823.1 212.6)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#b" transform="translate(1963.9 -283.46)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#b" transform="translate(368.23 70.866)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#b" transform="translate(368.23 1063)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#b" transform="translate(859.21 1488.2)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#b" transform="translate(1350.2 1913.4)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#b" transform="translate(2823.1 1204.7)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#b" transform="translate(2209.4 425.2)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#b" transform="translate(2945.9 566.93)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#b" transform="translate(.00034481 992.13)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#b" transform="translate(122.74 1346.5)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#b" transform="translate(981.95 1842.5)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#b" transform="translate(1595.7 1629.9)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#b" transform="translate(2945.9 1559.1)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#b" transform="translate(2577.6 496.06)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#b" transform="translate(3068.6 921.26)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#b" transform="translate(613.72 -212.6)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#b" transform="translate(245.49 1700.8)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#b" transform="translate(1104.7 1204.7)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#b" transform="translate(1595.7 637.8)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#b" transform="translate(2577.6 1488.2)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#b" transform="translate(2332.1 -212.6)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#b" transform="translate(3068.6 -70.866)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#b" transform="translate(981.95 -141.73)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#b" transform="translate(-122.74 1629.9)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#b" transform="translate(1227.4 566.93)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#b" transform="translate(1718.4 992.13)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#b" transform="translate(3068.6 1913.4)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#b" transform="translate(2700.4 -141.73)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#b" transform="translate(3436.8 992.13)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#b" transform="translate(1350.2 -70.866)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#b" transform="translate(490.98 1417.3)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#b" transform="translate(1350.2 921.26)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#b" transform="translate(1841.2 1346.5)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#b" transform="translate(3314.1 1629.9)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#b" transform="translate(3436.8 .00033673)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#b" transform="translate(613.72 1771.7)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#b" transform="translate(736.46 141.73)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#b" transform="translate(1963.9 1700.8)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#b" transform="translate(2209.4 1417.3)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#b" transform="translate(2332.1 1771.7)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#b" transform="translate(3314.1 637.79)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#b" transform="translate(859.21 496.06)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#b" transform="translate(1718.4 .00021976)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#b" transform="translate(1841.2 354.33)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#b" transform="translate(2454.9 1133.9)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#b" transform="translate(2700.4 850.39)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#b" transform="translate(3191.3 1275.6)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#a" transform="translate(-368.23 -70.867)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#a" transform="translate(981.95 -141.73)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#a" transform="translate(1841.2 354.33)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#a" transform="translate(490.98 425.2)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#a" transform="translate(-368.23 921.26)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#a" transform="translate(-245.49 1275.6)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#a" transform="translate(-122.74 1629.9)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#a" transform="translate(245.49 -283.47)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#a" transform="translate(1350.2 -70.867)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#a" transform="translate(2209.4 425.2)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#a" transform="translate(859.21 496.06)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#a" transform="translate(-.0000022759 992.13)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#a" transform="translate(122.74 1346.5)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#a" transform="translate(-368.23 1913.4)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#a" transform="translate(613.72 -212.6)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#a" transform="translate(1104.7 212.6)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#a" transform="translate(2577.6 496.06)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#a" transform="translate(-122.74 637.79)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#a" transform="translate(368.23 1063)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#a" transform="translate(490.98 1417.3)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#a" transform="translate(245.49 1700.8)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#a" transform="translate(1718.4 -2.4289e-7)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#a" transform="translate(1472.9 283.46)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#a" transform="translate(2945.9 566.93)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#a" transform="translate(245.49 708.66)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#a" transform="translate(736.46 1133.9)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#a" transform="translate(859.21 1488.2)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#a" transform="translate(613.72 1771.7)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#a" transform="translate(1963.9 -283.47)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#a" transform="translate(2086.6 70.865)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#a" transform="translate(1227.4 566.93)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#a" transform="translate(613.72 779.53)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#a" transform="translate(1104.7 1204.7)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#a" transform="translate(1227.4 1559.1)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#a" transform="translate(981.95 1842.5)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#a" transform="translate(2332.1 -212.6)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#a" transform="translate(2454.9 141.73)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#a" transform="translate(1595.7 637.79)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#a" transform="translate(981.95 850.39)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#a" transform="translate(1841.2 1346.5)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#a" transform="translate(1595.7 1629.9)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#a" transform="translate(1350.2 1913.4)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#a" transform="translate(2700.4 -141.73)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#a" transform="translate(2823.1 212.6)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#a" transform="translate(1963.9 708.66)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#a" transform="translate(1350.2 921.26)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#a" transform="translate(2209.4 1417.3)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#a" transform="translate(1963.9 1700.8)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#a" transform="translate(2700.4 1842.5)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#a" transform="translate(3068.6 -70.867)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#a" transform="translate(3191.3 283.46)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#a" transform="translate(2332.1 779.53)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#a" transform="translate(1718.4 992.13)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#a" transform="translate(1472.9 1275.6)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#a" transform="translate(2332.1 1771.7)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#a" transform="translate(3068.6 1913.4)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#a" transform="translate(368.23 70.865)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#a" transform="translate(-245.49 283.46)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#a" transform="translate(2700.4 850.39)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#a" transform="translate(2086.6 1063)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#a" transform="translate(2823.1 1204.7)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#a" transform="translate(2945.9 1559.1)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#a" transform="translate(736.46 141.73)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#a" transform="translate(122.74 354.33)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#a" transform="translate(3068.6 921.26)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#a" transform="translate(2454.9 1133.9)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#a" transform="translate(3191.3 1275.6)" height="100%" width="100%" y="0" x="0"/>
<use xlink:href="#a" transform="translate(2577.6 1488.2)" height="100%" width="100%" y="0" x="0"/>
</g>
</g>
</svg>
上次由 ejsoon 在 2025年 12月 2日 22:45,总共编辑 1 次。
https://ejsoon.vip/
弈趣極光:享受思維樂趣
头像
ejsoon
圈圈精英
圈圈精英
帖子: 4188
注册时间: 2022年 11月 18日 17:36
为圈友点赞: 165 次
被圈友点赞: 195 次
联系:

Re: 一個能把code轉換成svg的BBCode

帖子 ejsoon »

然後我換了一下初始的SVG:

代码: 全选

<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36"><circle cx="18" cy="18" r="12" fill="none" stroke="blue" stroke-width="2"/></svg>


轉成base64:

代码: 全选

data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNiIgaGVpZ2h0PSIzNiI+PGNpcmNsZSBjeD0iMTgiIGN5PSIxOCIgcj0iMTIiIGZpbGw9Im5vbmUiIHN0cm9rZT0iYmx1ZSIgc3Ryb2tlLXdpZHRoPSIyIi8+PC9zdmc+
https://ejsoon.vip/
弈趣極光:享受思維樂趣
回复

在线用户

正浏览此版面之用户: 没有注册用户 和 4 访客