SVG缩放和剪切路径

Question

我遇到了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/ 你有什么思路可以让这个工作？我是否漏掉了什么？

- picooose

---

像这样吗？http://jsfiddle.net/h5fmngqg/3/ - defghi1977

Answer 1

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

- Richard Hunter

---

你可以使用这个工具来转换单位：https://yoksel.github.io/relative-clip-path/ - Shaya Ulman

Answer 2

clipPath以绝对单位（像素）定义。如果应用于SVG中的某些内容，它将被缩放。但HTML部分并不知道这一点。它只是按照定义应用clipPath。

- Paul LeBeau

---

这正是我担心的。我刚试了一下，如果在SVG内应用剪辑路径，则会进行缩放。不幸的是，在这里这并没有对我有太大帮助，我必须找到一个解决方法... - picooose