【发布时间】：2023-04-04 14:20:01
【问题描述】：
我正在尝试采用复杂的路径形状并将其作为 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>
【问题讨论】：
-
当您转换单位时，您也需要转换值。否则，这就像将单位从毫米转换为公里，并期望绘图是相同的比例。
-
@RobertLongson 不确定您的意思。这些单位直接来自 Adobe Illustrator。
-
这些是 userSpaceOnUse 单位，您说将单位更改为 objectBoundingBox 不起作用。当您更改单位时，您必须更改适合这些单位的值。
-
@RobertLongson 所以我需要以某种方式将路径中的值转换为其他值？
-
objectBoundingBox 单位根据需要在 0..1 范围内。