Question

我试图采用复杂的路径形状并将其应用为css中的剪辑路径掩码，但我无法弄清楚如何将剪辑蒙版设置为＆＃34; fill＆＃34 ;父容器。相反，它只是被切断或者没有扩展以填充可用空间。

如果我添加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

Answer 1

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

你的路径大约是700x575，所以你的路径大约是600到700倍。

最简单的解决方案是向transform添加<clipPath>属性，将坐标缩放到正确的范围。

<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

复杂的SVG剪辑路径响应

1 个答案: