html - SVG 文件的剪切路径

Question

我尝试将我的 SVG 复制到我的 HTML 中并将其定义为 clipPath，但它没有以正确的方式显示形状。我可以使用文件路径定义 clipPath 吗？

<div class="gradient">
</div>

<svg height="0" width="0">
  <defs>
    <clipPath id="Camera">
        <style>
                .cls-1, .cls-2 {
                  fill: #363636;
                }

            .cls-1, .cls-3 {
              stroke: #363636;
            }

            .cls-1 {
              stroke-width: 1px;
              fill-rule: evenodd;
            }

            .cls-3 {
              fill: none;
              stroke-width: 50px;
            }
          </style>
        <path class="cls-1" d="M566.282,395.982s-121.771,16.243-155.258,35.532-93.7,51.606-135.978,123.854c-1.285-10.084-1.014-8.122-1.014-8.122v-33.5a319.278,319.278,0,0,1,20.3-80.2c15.223-37.882,41.848-78.09,77.121-99.489,55.447,0,87.691,5.262,142.067,27.411C565.1,395.035,566.282,395.982,566.282,395.982Zm-136.671,44.24S382.787,553.845,382.741,592.5s-2.176,106.981,39.225,179.738c-9.372-3.929-7.538-3.182-7.538-3.182l-29-16.751a319.037,319.037,0,0,1-59.278-57.684c-25.181-32.13-46.675-75.3-47.563-116.562,27.724-48.04,48.4-73.345,94.761-109.381C428.2,440.773,429.611,440.222,429.611,440.222Zm-34.372,138.5s74.972,97.311,108.424,116.665,91.55,55.336,175.261,55.844c-8.09,6.151-6.526,4.936-6.526,4.936l-29.01,16.739a319.273,319.273,0,0,1-79.6,22.5c-40.418,5.748-88.553,2.786-124.725-17.061-27.733-48-39.3-78.549-47.321-136.692C395.011,580.218,395.239,578.721,395.239,578.721ZM501.768,677.28s121.722-16.3,155.2-35.605,93.676-51.652,135.971-123.924c1.28,10.084,1.011,8.121,1.011,8.121l-0.015,33.5a319.666,319.666,0,0,1-20.323,80.215c-15.233,37.892-41.864,78.115-77.131,99.532-55.422.025-87.649-5.222-141.989-27.348C502.95,678.227,501.768,677.28,501.768,677.28Zm138.679-42.488s46.752-113.61,46.78-152.27,2.126-106.987-39.29-179.768c9.37,3.933,7.536,3.185,7.536,3.185l29,16.765a319.457,319.457,0,0,1,59.277,57.715c25.185,32.144,46.688,75.329,47.594,116.593C763.65,545.042,743,570.339,696.672,606.357,641.857,634.242,640.447,634.792,640.447,634.792ZM672.715,493.3s-74.971-97.311-108.423-116.665S472.741,321.3,389.031,320.789c8.089-6.151,6.525-4.936,6.525-4.936l29.01-16.739a319.289,319.289,0,0,1,79.6-22.5c40.418-5.748,88.552-2.786,124.725,17.061,27.733,48.005,39.3,78.549,47.321,136.692C672.943,491.8,672.715,493.3,672.715,493.3Z"/>
        <circle class="cls-2" cx="176" cy="176" r="60"/>
        <rect id="Camera_Body" data-name="Camera Body" class="cls-3" x="38" y="38" width="1001" height="1001" rx="100" ry="100"/>
</clipPath>

将显示此

https://codepen.io/TVsVeryOwn/pen/yjwaoy

我正在尝试得到类似的东西(我知道我的梯度是倒退的):

Answer 1

< clipPath > 只使用形状的填充。

如果删除 < rect id="Camera_Body" >从你的 SVG 代码中分离出来——你会看到它在没有这个 rect 元素的情况下按你想要的方式工作。矩形没有填充 - 只有描边 - 并且剪裁不适用于描边。

This可能有帮助。