0

I have two elements in my <svg>:

  • rect = light brown bg panel
  • path = dark brown ellipse (circle).

See following example: enter image description here

I need to stretch the rect so that is 100% of both width and height of the parent <div>, but need to maintain the scale of path (so the circle's relative height is maintained and does not distort to an oval in any context).From the picture supplied you will see that both elements are currently stretching, which is not desirable.

One constraint I have is that the rect must be an <svg> and not a <div>.

Here is my code:

<svg class="bg container" viewBox="0 0 1024 768" preserveAspectRatio="none" width="100%" height="100%">
  <rect class="rect" width="1024" height="768"/>
  <path class="path" d="M511.99961-16h.0008A399.99959,399.99959,0,0,1,912,383.99959v.00083A399.99959,399.99959,0,0,1,512.00041,784h-.00083A399.99959,399.99959,0,0,1,112,384.00041v-.0008A399.99961,399.99961,0,0,1,511.99961-16Z"/>
  <defs>
    <linearGradient id="gradient" y1="384" x2="1024" y2="384" gradientUnits="userSpaceOnUse">
        <stop offset="0" stop-color="#f8f7f2"/>
        <stop offset="1" stop-color="#fcfbf7"/>
    </linearGradient>
    <style>
      .bg.container .rect {
        fill: url(#gradient);
      }
      .bg.container .path {
        fill: #978a60;
        opacity: .08;
      }
    </style>
  </defs>
</svg>

Thanks in advance.

Updated code: path converted to circle

<svg class="bg container" viewBox="0 0 1024 768" preserveAspectRatio="none" width="100%" height="100%">
  <rect class="rect" width="1024" height="768"/>
  <circle class="cls-2" cx="512" cy="384" r="400">
  <defs>
    <linearGradient id="gradient" y1="384" x2="1024" y2="384" gradientUnits="userSpaceOnUse">
        <stop offset="0" stop-color="#f8f7f2"/>
        <stop offset="1" stop-color="#fcfbf7"/>
    </linearGradient>
    <style>
      .bg.container .rect {
        fill: url(#gradient);
      }
      .bg.container .path {
        fill: #978a60;
        opacity: .08;
      }
    </style>
  </defs>
</svg>
DanMad
  • 1,643
  • 4
  • 23
  • 58
  • Could you just use an SVG `circle` element instead of a `path`? Seems like that'd force it to always be a circle. – Chris Riebschlager Jan 05 '18 at 00:51
  • 1
    Thank you for this, @ChrisRiebschlager. I will experiment with this and report back. I am using Adobe Illustrator to export my ``, the following article looks very useful for other people having trouble exporting ``s instead of ``s: https://forums.adobe.com/thread/2345701 – DanMad Jan 05 '18 at 01:05
  • 1
    Illustrator is just gonna do whatever it wants. :) But I think your case is simple enough that you could get a circle hand-coded into place. – Chris Riebschlager Jan 05 '18 at 01:30
  • @ChrisRiebschlager: You're right—Illustrator does do exactly what it wants lol. I have updated the code in my initial question to include a `circle`, but the stretching is still occurring. – DanMad Jan 05 '18 at 02:20
  • Ah, ok. I think I'm tracking. So you want something like this fiddle, but the rect will scale width/height independently and the circle will stay a circle and in the center? https://jsfiddle.net/kaf89s93/7/ – Chris Riebschlager Jan 05 '18 at 02:33

0 Answers0