Menu
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?
380
A path is defined in SVG using the 'path' element. The basic shapes are all described in terms of what their equivalent path is, which is what their shape is as a path. (The equivalent path of a 'path' element is simply the path itself.)
The <path> element is the most powerful element in the SVG library of basic shapes. It can be used to create lines, curves, arcs, and more. Paths create complex shapes by combining multiple straight lines or curved lines. Complex shapes composed only of straight lines can be created as <polyline> s.
The d attribute defines a path to be drawn. A path definition is a list of path commands where each command is composed of a command letter and numbers that represent the command parameters.
You can use getTotalLength(): The SVGGeometryElement. getTotalLength() method returns the user agent's computed value for the total length of the path in user units.
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.
109
Unfortunately, path coordinates can only be expressed with a single unit, Viewport Coordinates.
28
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
