URL编码的SVG rect不保持圆角
URL编码的SVG rect不保持圆角
提问于 2022-06-24 13:13:15
我想要一个SVG作为HTML列表项目符号。
我创建了一个SVG，并尝试了一些像https://yoksel.github.io/url-encoder/这样的工具来使用一个URL编码的SVG，但是由于某种原因，rect失去了它的圆角。
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="1.0" encoding="UTF-8"%3F%3E%3Csvg width="24" height="24" version="1.1" viewBox="0 0 6.35 6.35" xmlns="http://www.w3.org/2000/svg"%3E%3Crect x=".375" y=".375" width="5.6" height="5.6" rx="0" ry="1.7089" fill="none" stroke="%23007bc4" stroke-width=".75"/%3E%3C/svg%3E');"></div>
我能得到圆角与URL编码吗？
回答 2
Stack Overflow用户
发布于 2022-06-24 13:43:14
您可以通过将SVG包装到本地<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>
Stack Overflow用户
发布于 2022-06-24 14:05:27
lol也可以工作(，我不推荐这个)，您可以使用css构建一个空白的svg：
<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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72744646
复制相关文章
相似问题
腾讯云开发者
