URL 编码的 SVG 矩形不保留圆角

Question

我想要一个 SVG 作为 HTML 列表项项目符号。

我创建了一个 SVG 并尝试了一些工具，例如https://yoksel.github.io/url-encoder/来使用 URL 编码的 SVG，但由于某种原因，矩形失去了圆角。

svg

<?xml version="1.0" encoding="UTF-8"?>
<svg width="24" height="24" version="1.1" viewBox="0 0 6.35 6.35" xmlns="http://www.w3.org/2000/svg">
 <rect x=".375" y=".375" width="5.6" height="5.6" rx="0" ry="1.7089" fill="none" stroke="#007bc4" stroke-width=".75"/>
</svg>

生成 URL 编码 SVG 的示例：

 #demo { width: 24px; height: 24px; background-repeat: no-repeat; }

 <div id="demo" class="demo" style="background-image: url('data:image/svg+xml,%3C%3Fxml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;%3F%3E%3Csvg width=&quot;24&quot; height=&quot;24&quot; version=&quot;1.1&quot; viewBox=&quot;0 0 6.35 6.35&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;%3E%3Crect x=&quot;.375&quot; y=&quot;.375&quot; width=&quot;5.6&quot; height=&quot;5.6&quot; rx=&quot;0&quot; ry=&quot;1.7089&quot; fill=&quot;none&quot; stroke=&quot;%23007bc4&quot; stroke-width=&quot;.75&quot;/%3E%3C/svg%3E');"></div>

我可以用 URL 编码得到圆角吗？

Answer 1

您可以通过将 SVG 包装到本机 Web 组件<svg-background>中来保存（手动）编码步骤（它将执行所需的编码）

第一个和第二个<svg-background>用法表明您确实需要一个 RX 值：

 <svg-background> <svg viewBox="0 0 6 6" xmlns="http://www.w3.org/2000/svg"> <rect x="1" y="1" width="4" height="4" rx="0" ry="2" fill="none" stroke="#0000ff" stroke-width="2"/> </svg> </svg-background> <svg-background> <svg viewBox="0 0 6 6" xmlns="http://www.w3.org/2000/svg"> <rect x="1" y="1" width="4" height="4" rx="2" ry="2" fill="none" stroke="blue" stroke-width="2"/> </svg> </svg-background> <svg-background> <svg viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'><rect x='1' y='1' width='4' height='4' rx='.5' ry='2' fill='none' stroke='red' stroke-width='.75'/></svg> </svg-background> <style> svg-background { display: inline-block; background:pink; width: 150px; height: 150px; } </style> <script> customElements.define("svg-background", class extends HTMLElement { connectedCallback() { setTimeout(() => { // wait till innerHTML is parsed this.style.backgroundImage = `url('data:image/svg+xml;charset=UTF-8,${ this.innerHTML .replace(/\>[\t\s\n ]+\</g, "><") // replace all whitespace BETWEEN tags .replace(/#/g, "%23").trim()}')`; this.innerHTML = ""; }); } }) </script>

Answer 2

大声笑这也将起作用（我不推荐这样做）您可以在空白 svg 周围使用 css 构建：

 <meta charset="UTF-8"> <meta name="Generator" content="Custa"> <title></title> </head> <body> <style> .im1{ width: 24px; height: 24px; background-repeat: no-repeat; border-radius: 8px;border :3px solid red; background-image: url('data:image/svg+xml,%3C%3Fxml version="1.0" encoding="UTF-8"%3F%3E%3Csvg width="24" height="24" version="1.1" viewBox="0 0 24 24" %3E%0A%3C/svg%3E'); } </style> <img class="im1"/ > </body> </html>

URL 编码的 SVG 矩形不保留圆角

问题描述

2 个解决方案

解决方案1
0 2022-06-24 13:43:14

解决方案2
0 2022-06-24 14:05:27

URL 编码的 SVG 矩形不保留圆角

问题描述

2 个解决方案

解决方案1 0 2022-06-24 13:43:14

解决方案2 0 2022-06-24 14:05:27

解决方案1
0 2022-06-24 13:43:14

解决方案2
0 2022-06-24 14:05:27