Search code examples
csssvgcss-variables

Use CSS variable in url('data:image/svg+xml')

I use the following to achieve a dashed border around a div:

div {
  width: 100px;
  height: 100px;
  border-radius: 16px;
  background-image: url('data:image/svg+xml,%3csvg stroke="black" width="100%25" height="100%25" xmlns="http://www.w3.org/2000/svg"%3e%3crect width="100%25" height="100%25" fill="none" rx="16px" ry="16px" stroke-width="6" stroke-dasharray="5%25%2c 2%25" stroke-dashoffset="4" stroke-linecap="butt"/%3e%3c/svg%3e');
}
<div></div>

Is it possible to replace the stroke color black with a CSS variable? Unfortunately, the following does not work:

div {
  --color: black;
  background-image: url('data:image/svg+xml,%3csvg stroke="var(--color)" width="100%25" height="100%25" xmlns="http://www.w3.org/2000/svg"%3e%3crect width="100%25" height="100%25" fill="none" rx="16px" ry="16px" stroke-width="6" stroke-dasharray="5%25%2c 2%25" stroke-dashoffset="4" stroke-linecap="butt"/%3e%3c/svg%3e');
}
Solution

  • Do it differently using mask:

    .box {
  width: 100px;
  height: 100px;
  display:inline-block;
  position:relative;
}
.box::before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  -webkit-mask: url('data:image/svg+xml,%3csvg stroke="black" width="100%25" height="100%25" xmlns="http://www.w3.org/2000/svg"%3e%3crect width="100%25" height="100%25" fill="none" rx="16px" ry="16px" stroke-width="6" stroke-dasharray="5%25%2c 2%25" stroke-dashoffset="4" stroke-linecap="butt"/%3e%3c/svg%3e');
  background:var(--c,red);
  border-radius: 16px;
}
    <div class="box"></div>
<div class="box" style="--c:green"></div>
<div class="box" style="--c:blue"></div>