我可以使用'path'元素混合单位吗？ [英] Can I use mixed units with 'path' element?

问题描述

SVG有一个矩形元素，其尺寸可以用像素的所有者和半径尺寸的百分比来指定。因此，通过执行以下步骤

 < div style =" position：relative;"> 
< object class =" AIRound"类型= QUOT;图像/ 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>"风格= QUOT;位置：绝对的;左：0像素;顶：0像素; 
宽度：100％;高度：100％;的z-index：-100;">< /对象> 
示例文本< br>示例文本
示例文本< br>示例文本
< / div>  

我可以得到一个带圆角的恒定半径，它不取决于块大小。但是一个简单的圆角矩形很无聊，有时你想要一些奇特的东西（例如 http://my.opera.com/ ）。我试过使用'path'元素，但在我看来，我们不能使用'path'（像素和百分比）混合单位。我不能使用任何形状的组合，因为它不会使用半透明和渐变填充。

所以我的问题是我可以使用混合单位的'path'元素？也许还有另一项我忽视的工作？

解决方案

路径和点列表只能以用户单位指定。通过具有用'viewBox'指定新坐标系的容器（例如svg或符号元素），可以影响用户单元解析的内容。这仍然不能解决所有情况。

要修复更多的情况，您可以使用多个形状构建图像，每个图形具有不同的剪辑路径以剪掉部分这是不可取的。您可以查看圆角发生器 SVG输出以获取此方法的示例。

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?

解决方案

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.

这篇关于我可以使用'path'元素混合单位吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！