0

I have a .svg displayed within a <div> containing text, the div size changes and its border adapt with it. The svg border have rounded corners and I need to keep them after resize.

I used preserveAspectRatio="none" but the corners are deformed.

html

<div class="border">
 <p>text.</p>
 <%- include('../../public/img/border.svg'); -%>
</div>

.css

.border svg {
  height: 100%;
  position: absolute;
  width: 100%;
}

.svg

<svg id="level1" data-name="Livello 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 31.27 31.27">
  <defs>
    <style>
      .cs-1 {
        fill: none;
        stroke-miterlimit: 10;
        stroke-width: 5px;
        stroke: url("#Gradiente_7");
      }
    </style>
    <linearGradient id="Gradient_7" x1="25.25" y1="32.29" x2="6.02" y2="-1.02" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fff" stop-opacity="0.1"/><stop offset="1" stop-color="#fff"/></linearGradient>
  </defs><rect class="border-unique-ability" x="1" y="1" width="29.27" height="29.27" rx="4.8"  vector-effect="non-scaling-stroke" preserveAspectRatio="none"/></svg>

enter image description here

enter image description here

Artemis
  • 589
  • 1
  • 6
  • 19
  • why didnt you use "border-radius" property? – Dev Sep 08 '21 at 14:15
  • @Dev on SVG? how? – Artemis Sep 08 '21 at 14:17
  • He probably wants to keep the gradient, in which case I'd suggest going a route [like this](https://css-tricks.com/gradient-borders-in-css/) instead. – Chris W. Sep 08 '21 at 14:17
  • @Artemis not on the svg, on the div instead – Dev Sep 08 '21 at 14:19
  • You won't make it by an svg image. See this article https://css-tricks.com/gradient-borders-in-css/ and use two divs. – Azu Sep 08 '21 at 16:19
  • https://stackoverflow.com/questions/51496204/border-gradient-with-border-radius/51496341#51496341 this post worked for me. Not svg but fits the purpose. Otherwise using rx in css might help since according to specs you can set the rx with css these days... – Joris Kroos Jan 20 '23 at 17:15

0 Answers0