Home/ Questions/Q 296621
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-12T06:33:55+00:00

SVG has a rectangle element which dimensions could be specified in percent of dimensions

  • 0

SVG has a rectangle element which dimensions could be specified in percent of dimensions of its owner and radius in pixels. So by doing the following

<div style="position: relative;">
<object class="AIRound" type="image/svg+xml"
data="data:image/svg+xml,<svg
xmlns='http://www.w3.org/2000/svg'><rect x='0' y='0' width='100%'
height='100%' rx='10px' ry='10px' fill='#99ff99'
opacity='0.9'/></svg>" style="position:absolute; left:0px; top:0px;
width:100%; height:100%; z-index:-100;"></object>
Sample text<br>Sample text
Sample text<br>Sample text
</div>

I can get a with rounded corners with the constant radius which doesn’t depends on the block size. But a simple rectangle with rounded corners it’s boring and sometimes you want something fancy (e. g. http://my.opera.com/). I’ve tried to use ‘path’ element but it seems to me we can’t use mixed units with ‘path’ (pixels & percents). I can’t use a combination of shapes either because it won’t work semitransparents and gradient fill.

So my qeustion is can I use ‘path’ element with mixed units? Maybe there’s another work around which I overlooked?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Paths and point-lists can only be specified in user units. By having a container (e.g an svg or symbol element) that specifies a new coordinate system with ‘viewBox’ it’s possible to affect what the user units resolve to. That still doesn’t solve all cases.

    To fix a few more cases you can build the image using multiple shapes each with a different clip-path to clip away the parts that are undesirable. You can have a look at the Rounded Corner Generator SVG output for an example of that approach.

    • 0