URL编码的SVG rect不保持圆角

<?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>

#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>

<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-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-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>

<meta charset="UTF-8">
<meta name="Generator" content="Custa">
<title></title>
</head>
<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');

URL编码的SVG rect不保持圆角

2 个回答