复杂的SVG剪裁响应式

Question

我正在尝试将一个复杂的路径形状应用为CSS中的剪辑路径掩码，但我无法弄清楚如何使剪辑掩码“填充”父容器。相反，它只是被切断或不能扩展以填充可用空间。

如果我添加clipPathUnits="objectBoundingBox"，则根本不会出现。

<svg viewBox="0 0 720 720">
  <defs>
    <clipPath id="map">
      <path d="M568.421 326.842L511.579 270v37.895h-18.947v-18.948h-56.843v37.895l18.948 37.894v18.948h-18.948l37.896 56.842h-37.896l-18.947-18.948v-18.947h-37.895L360 383.684h-18.947l-18.948-37.894v-37.895L360 270l37.895-37.895-18.948-37.895H360v18.948l-18.947-18.948h-18.948v37.895h-37.894l-56.843-18.947-37.894-56.842h-56.842l-18.947-18.948-75.79 75.79v37.895h18.947v75.789L37.895 345.79l5.532 48.163 32.362 46.573 113.685 37.895 94.737 18.947h94.736v-18.947h37.895l18.947 37.895h18.948v56.842l56.842-37.894v-37.896h37.895l18.947-37.894v-37.896l56.842-37.894V345.79l-18.948-18.948z"/><path d="M246.315 194.21h56.843v-18.947l-18.947-37.895h-18.948v37.895h-18.948zM227.368 137.368h18.947v-18.947h-37.894V156.316h18.947zM341.053 175.263h56.842l37.894 37.895-18.947 18.947V270h75.79v-18.947h-37.895v-18.948h37.895V194.21h-37.895l-56.842-56.842h-56.842zM265.263 99.474h18.948v18.947h-18.948zM284.211 61.579h18.947v18.948h-18.947zM303.158 108.947h18.947v18.947h-18.947zM341.053 99.474h37.895v18.947h-37.895zM227.368 80.526h18.947v18.947h-18.947zM378.947 80.526V4.737H360l-37.895 37.894v18.948l18.948 18.947zM587.368 440.526h37.895v37.895h-37.895zM663.158 364.736V345.79h-18.947V402.631l56.842-18.947v-18.948zM378.947 270h18.947v18.947h-18.947zM644.211 421.578h18.947v18.948h-18.947zM644.211 459.474h18.947v18.947h-18.947z"/>
    </clipPath>
  </defs>
</svg>

https://codepen.io/picard102/pen/aEwJzR

- Picard102

---

当你转换单位时，你需要同时转换数值。否则就像是将单位从毫米转换为千米，期望图纸保持相同的比例尺寸一样。 - Robert Longson

@RobertLongson 不太确定你的意思。这些单位直接来自Adobe Illustrator。 - Picard102

那些是userSpaceOnUse单位，你说将单位更改为objectBoundingBox不起作用。当你更改单位时，必须更改值以适合这些单位。 - Robert Longson

@RobertLongson，那么我需要以某种方式将路径中的值转换为其他值吗？ - Picard102

objectBoundingBox单位的范围在0到1之间，按要求进行缩放。 - Robert Longson

我没有看到任何工具可以在不损坏SVG的情况下进行转换。 - Picard102

Answer 1

正如Robert所说，当您指定clipPathUnits="objectBoundingBox"时，剪辑路径定义中的坐标应该介于0,0（左上角）和1,1（右下角）之间。

您的路径大约为700x575，因此您的路径大约是正常大小的600到700倍。

最简单的解决方法是在您的<clipPath>上添加一个transform属性，将坐标缩小到正确的范围内。

<clipPath id="map" clipPathUnits="objectBoundingBox" transform="scale(0.00143, 0.00174)">

• 1/700约等于0.00143
• 1/575约等于0.00174

https://codepen.io/anon/pen/GyvZOM

- Paul LeBeau

---

谢谢！有没有办法使蒙版不改变纵横比？ - Picard102

如果您使用 objectBoundingBox，那么 x 将按原始对象的宽度进行缩放，而 y 将按高度进行缩放。因此，避免纵横比例改变的唯一方法是使剪辑路径和原始对象的纵横比例相同。 - Paul LeBeau