我正在努力解决SVG剪辑路径缩放行为。我想缩放一个剪辑路径以适合其所应用的元素大小。我一直在阅读有关clipPath单元的信息,但无法正常工作。
这是我尝试不做任何缩放的示例:http : //jsfiddle.net/1196o7n0/1/
...和SVG(主要形状和clippath形状完全相同):
<svg width="800" height="600" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
<clipPath id="svgPath">
<circle r="40" cy="50" cx="50" />
<circle r="74.576" cy="235" cx="193.949" />
<circle r="47.034" cy="108.305" cx="426.576" />
<circle r="43.644" cy="255.763" cx="346.915" />
<circle r="35.17" cy="82.882" cx="255.39" />
</clipPath>
<g fill="#000">
<circle r="40" cy="50" cx="50" />
<circle r="74.576" cy="235" cx="193.949" />
<circle r="47.034" cy="108.305" cx="426.576" />
<circle r="43.644" cy="255.763" cx="346.915" />
<circle r="35.17" cy="82.882" cx="255.39" />
</g>
</svg>
现在,如果我定义一个视图框并使SVG缩放以适合文档的宽度和高度,则剪切路径似乎无法缩放:http : //jsfiddle.net/1196o7n0/2/
关于如何进行这项工作的任何想法吗?我错过了什么吗?
要缩放剪辑路径以适合您要应用的元素,您需要添加clipPathUnits="objectBoundingBox"
到clippath
元素。
这是一个基于您的示例的JsFiddle,演示了如何执行此操作。
<svg width="0" height="0" >
<defs>
<clipPath id="svgPath" clipPathUnits="objectBoundingBox">
<circle r="0.05" cy="0.0625" cx="0.1625" />
<circle r="0.09322" cy="0.29375" cx="0.2424" />
<!-- rest of path here-->
</clipPath>
</defs>
</svg>
<div class="content centered">
<div class="clipped"></div>
</div>
注意的是,路径的单位必须是介于0和1之间的十进制数;这些代表相应元素的宽度或高度的分数。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句