5

我正在努力解决 SVG 剪辑路径缩放行为。我想缩放剪辑路径以适应它所应用的元素大小。我一直在阅读有关 clipPath 单元的信息，但无法正常工作。

这是我在不进行任何缩放的情况下尝试做的一个示例：http: //jsfiddle.net/1196o7n0/1/

...和 ​​SVG（主要形状和剪辑路径形状完全相同）：

<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/

关于如何完成这项工作的任何想法？我错过了什么吗？

4

2 回答 2

11

要缩放剪辑路径以适合您应用它的元素，您需要添加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之间的十进制数；这些代表相应元素宽度或高度的分数。

于 2015-10-24T09:04:45.680 回答
1

clipPath 以绝对单位（像素）定义。如果它被应用于 SVG 中的某些东西，它会被缩放。但事物的 HTML 方面并不知道这一点。它只是按照定义应用clipPath。

于 2014-09-18T12:38:08.210 回答