主页 / coding / 问题 / 79490604
Accepted
user29587692
Asked: 2025-03-07 04:23:11 +0800 CST

如何才能使一个 SVG 路径/填充仅绘制在另一个复杂的 SVG 路径“内部”？

  • 772

我在 SVG 中有一个瓶子形状，里面有一个装饰性的漩涡和一些穿过内部的其他线条，因此我不确定什么算作路径的“内部”和“外部”。我想在瓶子“内部”放置一个波浪形状，但我没有得到任何积极的实验结果<clipPath>，我不确定瓶子内部的线条是否对我不利。

我现在拥有的波浪形状位于瓶子顶部：

  * {
    margin: 0;
    box-sizing: border-box;
  }
  .container {
    height: 100dvh;
  }
  svg {
    display: block;
    padding-block: 5%;
  }
<div class="container">
<svg width="100%" height="100%" viewBox="0 0 250 457" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path id="bottle" d="M89.6174 72.5661C78.3761 70.8794 34.9222 93.2227 19 135.503M89.6174 72.5661V2H125M89.6174 72.5661H125M19 135.503C-0.902714 188.355 -0.0185633 201.762 9.29124 288.909C17.1881 362.829 33.8318 424.189 44.8889 432.248C60.9111 443.925 84 454.607 125 454.607M19 135.503C130.2 168.307 155 202.255 125 251.842 M160.383 72.5661C171.624 70.8794 215.078 93.2227 231 135.503M160.383 72.5661V2H125M160.383 72.5661H125M231 135.503C250.903 188.355 250.019 201.762 240.709 288.909C232.812 362.829 216.168 424.189 205.111 432.248C189.089 443.925 166 454.607 125 454.607M231 135.503C119.8 168.307 95 202.255 125 251.842" stroke="#B9B9B9" stroke-width="4"/>
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="130px"
     viewBox="0 0 136 195" style="enable-background:new 0 0 136 195;" xml:space="preserve">
         <path fill="#04ACFF" id="waveShape" d="M300,300V2.5c0,0-0.6-0.1-1.1-0.1c0,0-25.5-2.3-40.5-2.4c-15,0-40.6,2.4-40.6,2.4c-12.3,1.1-30.3,1.8-31.9,1.9c-2-0.1-19.7-0.8-32-1.9c0,0-25.8-2.3-40.8-2.4c-15,0-40.8,2.4-40.8,2.4c-12.3,1.1-30.4,1.8-32,1.9c-2-0.1-20-0.8-32.2-1.9c0,0-3.1-0.3-8.1-0.7V300H300z"/>
    </svg>
</svg>
</div>

用标签围住瓶子路径<clipPath>只会导致单独出现波浪形状：

  * {
    margin: 0;
    box-sizing: border-box;
  }
  .container {
    height: 100dvh;
  }
  svg {
    display: block;
    padding-block: 5%;
  }
<div class="container">
<svg width="100%" height="100%" viewBox="0 0 250 457" fill="none" xmlns="http://www.w3.org/2000/svg">
    <clipPath>
    <path id="bottle" d="M89.6174 72.5661C78.3761 70.8794 34.9222 93.2227 19 135.503M89.6174 72.5661V2H125M89.6174 72.5661H125M19 135.503C-0.902714 188.355 -0.0185633 201.762 9.29124 288.909C17.1881 362.829 33.8318 424.189 44.8889 432.248C60.9111 443.925 84 454.607 125 454.607M19 135.503C130.2 168.307 155 202.255 125 251.842 M160.383 72.5661C171.624 70.8794 215.078 93.2227 231 135.503M160.383 72.5661V2H125M160.383 72.5661H125M231 135.503C250.903 188.355 250.019 201.762 240.709 288.909C232.812 362.829 216.168 424.189 205.111 432.248C189.089 443.925 166 454.607 125 454.607M231 135.503C119.8 168.307 95 202.255 125 251.842" stroke="#B9B9B9" stroke-width="4"/>
    </clipPath>
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="130px"
     viewBox="0 0 136 195" style="enable-background:new 0 0 136 195;" xml:space="preserve">
         <path fill="#04ACFF" id="waveShape" d="M300,300V2.5c0,0-0.6-0.1-1.1-0.1c0,0-25.5-2.3-40.5-2.4c-15,0-40.6,2.4-40.6,2.4c-12.3,1.1-30.3,1.8-31.9,1.9c-2-0.1-19.7-0.8-32-1.9c0,0-25.8-2.3-40.8-2.4c-15,0-40.8,2.4-40.8,2.4c-12.3,1.1-30.4,1.8-32,1.9c-2-0.1-20-0.8-32.2-1.9c0,0-3.1-0.3-8.1-0.7V300H300z"/>
    </svg>
</svg>
</div>

围绕波浪路径<clipPath>只显示瓶子：

  * {
    margin: 0;
    box-sizing: border-box;
  }
  .container {
    height: 100dvh;
  }
  svg {
    display: block;
    padding-block: 5%;
  }
<div class="container">
<svg width="100%" height="100%" viewBox="0 0 250 457" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path id="bottle" d="M89.6174 72.5661C78.3761 70.8794 34.9222 93.2227 19 135.503M89.6174 72.5661V2H125M89.6174 72.5661H125M19 135.503C-0.902714 188.355 -0.0185633 201.762 9.29124 288.909C17.1881 362.829 33.8318 424.189 44.8889 432.248C60.9111 443.925 84 454.607 125 454.607M19 135.503C130.2 168.307 155 202.255 125 251.842 M160.383 72.5661C171.624 70.8794 215.078 93.2227 231 135.503M160.383 72.5661V2H125M160.383 72.5661H125M231 135.503C250.903 188.355 250.019 201.762 240.709 288.909C232.812 362.829 216.168 424.189 205.111 432.248C189.089 443.925 166 454.607 125 454.607M231 135.503C119.8 168.307 95 202.255 125 251.842" stroke="#B9B9B9" stroke-width="4"/>
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="130px"
     viewBox="0 0 136 195" style="enable-background:new 0 0 136 195;" xml:space="preserve">
         <clipPath>
         <path fill="#04ACFF" id="waveShape" d="M300,300V2.5c0,0-0.6-0.1-1.1-0.1c0,0-25.5-2.3-40.5-2.4c-15,0-40.6,2.4-40.6,2.4c-12.3,1.1-30.3,1.8-31.9,1.9c-2-0.1-19.7-0.8-32-1.9c0,0-25.8-2.3-40.8-2.4c-15,0-40.8,2.4-40.8,2.4c-12.3,1.1-30.4,1.8-32,1.9c-2-0.1-20-0.8-32.2-1.9c0,0-3.1-0.3-8.1-0.7V300H300z"/>
         </clipPath>
    </svg>
</svg>
</div>

这是在浏览器 SVG 编辑器中加载的瓶子路径：https://yqnn.github.io/svg-path-editor/#P=M89.6174_72.5661C78.3761_70.8794_34.9222_93.2227_19_135.503M89.6174_72.5661V2H125M89.6174_72.5661H125M19_135.503C-0.90 2714_188.355_-0.0185633_201.762_9.29124_288.909C17.1881_362.829_33.8318_424.189_ 44.8889_432.248C60.9111_443.925_84_454.607_125_454.607M19_135.503C130.2_168.307_1 55_202.255_125_251.842M160.383_72.5661C171.624_70.8794_215.078_93.2227_231_135.503M160.383_72.5661V2H125M160.383_72.5661H125M231_135.503C250.903_188.355_250.019 _201.762_240.709_288.909C232.812_362.829_216.168_424.189_205.111_432.248C189.089 _443.925_166_454.607_125_454.607M231_135.503C119.8_168.307_95_202.255_125_251.842

html

2 个回答

  1. Best Answer

    要使代码正常工作，需要做很多事情。但首先，需要进行一些清理：

    1. version="1.1"，style="enable-background:new 0 0 136 195;"完全xml:space="preserve"没有效果。只需删除它们即可。
    2. xmlns="http://www.w3.org/2000/svg"如果您在 HTML 页面内内联编写 SVG 代码，则xmlns:xlink="http://www.w3.org/1999/xlink"不需要 和 。但请注意，如果您省略该xmlns:xlink属性，则所有出现的xlink:href也必须缩短为href。
    3. 您想在代表内容的蓝色区域前面绘制代表瓶子的线条。因此，它需要在源代码中更靠下一点。

    让我们看一个暂时的结果，忽略剪辑路径：

    * {
    margin: 0;
    box-sizing: border-box;
  }
  .container {
    height: 100dvh;
  }
  svg {
    display: block;
    padding-block: 5%;
  }
    <div class="container">
<svg width="100%" height="100%" viewBox="0 0 250 457" fill="none">
    <path id="bottle" d="M89.6174 72.5661C78.3761 70.8794 34.9222 93.2227 19 135.503M89.6174 72.5661V2H125M89.6174 72.5661H125M19 135.503C-0.902714 188.355 -0.0185633 201.762 9.29124 288.909C17.1881 362.829 33.8318 424.189 44.8889 432.248C60.9111 443.925 84 454.607 125 454.607M19 135.503C130.2 168.307 155 202.255 125 251.842 M160.383 72.5661C171.624 70.8794 215.078 93.2227 231 135.503M160.383 72.5661V2H125M160.383 72.5661H125M231 135.503C250.903 188.355 250.019 201.762 240.709 288.909C232.812 362.829 216.168 424.189 205.111 432.248C189.089 443.925 166 454.607 125 454.607M231 135.503C119.8 168.307 95 202.255 125 251.842" stroke="#B9B9B9" stroke-width="4"/>
    <svg x="0px" y="130px" viewBox="0 0 136 195">
         <path fill="#04ACFF" id="waveShape" d="M300,300V2.5c0,0-0.6-0.1-1.1-0.1c0,0-25.5-2.3-40.5-2.4c-15,0-40.6,2.4-40.6,2.4c-12.3,1.1-30.3,1.8-31.9,1.9c-2-0.1-19.7-0.8-32-1.9c0,0-25.8-2.3-40.8-2.4c-15,0-40.8,2.4-40.8,2.4c-12.3,1.1-30.4,1.8-32,1.9c-2-0.1-20-0.8-32.2-1.9c0,0-3.1-0.3-8.1-0.7V300H300z"/>
    </svg>
</svg>
</div>

    现在到了最重要的部分：clip-path 表达了两个实体之间的关系：一个图形元素（在您的情况下是一个<svg>元素）被剪切到以几何形式表示的区域，这里只是另一个<path>元素。用一个包裹一个元素<clipPath>完全没有作用，因为缺少与另一个元素的关系。

    总体模式如下

    <clipPath id="clip">
    <path id="form" d="..."/>
</clipPath>

<path id="grafic d="..." clip-path="url(#clip)"/>

    “图形被表单裁剪”的关系用属性来表达。元素clip-path="url(#clip)"内部写入的所有内容都不会被渲染。它仅被解释为裁剪的来源。<clipPath>

    就您而言，将剪辑路径应用于<svg>元素会使事情变得复杂。属性viewBox和clip-path交互方式以及结果看起来如此的原因非常微妙且难以理解。大多数情况下，<svg>用<g>元素包裹并将剪辑路径应用于元素会更容易。

    如果您希望将路径用作剪切源的形式，并将其绘制为图形，则它需要出现在代码中的两个位置。幸运的是，您可以轻松地使用<use>元素重复使用内容。一般模式如下：

    <clipPath id="clip">
    <path id="form" d="..."/>
</clipPath>

<path id="grafic d="..." clip-path="url(#clip)"/>
<use href="#form"/>

    但在执行此操作之前，请考虑一下您的图形以及它在浏览器编辑器中的呈现方式。灰色显示的区域将被解释为“内部”，其他所有区域均为“外部”。这显然不是您的本意。就您而言，原因在于路径的结构有些混乱，它实际上由九个 (!) 独立的子路径组成，每个子路径都有自己的内部/外部。

    清理代码是一项网站 SvgPathEditor 不太适合的任务。您需要一个功能齐全的矢量图形编辑器，如 Illustrator 或 Inkscape，才能有效地完成这项工作。具体需要做什么太复杂了，这里无法简短描述，我只是向您展示结果。您需要有一个表示外部表单的表单，以及一个单独的表单，用于该表单内部显示的所有内容。只有第一个用于剪辑：

    <path d="M205.111 432.248c11.057-8.059 27.701-69.419 35.598-143.339 9.31-87.147 10.194-100.554
-9.709-153.406-15.922-42.2803-59.376-64.6236-70.617-62.9369V2H89.6174V72.5661C78.3761
70.8794 34.9222 93.2227 19 135.503-.9027 188.355-.0186 201.762 9.2912 288.909c7.8969
73.92 24.5406 135.28 35.5977 143.339C60.9111 443.925 84 454.607 125 454.607s64.089-10.682
80.111-22.359Z"/>

<path d="M19 135.503c111.2 34.307 136 66.752 106 116.339-30
-49.587-5.2-83.535 106-116.339M89.6174 72.5661H160.383"/>


    * {
    margin: 0;
    box-sizing: border-box;
  }
  .container {
    height: 100dvh;
  }
  svg {
    display: block;
    padding-block: 5%;
  }
    <div class="container">
<svg width="100%" height="100%" viewBox="0 0 250 457">
    <clipPath id="clip">
        <path id="bottle" d="M205.111 432.248c11.057-8.059 27.701-69.419 35.598-143.339 9.31-87.147 10.194-100.554-9.709-153.406-15.922-42.2803-59.376-64.6236-70.617-62.9369V2H89.6174V72.5661C78.3761 70.8794 34.9222 93.2227 19 135.503-.9027 188.355-.0186 201.762 9.2912 288.909c7.8969 73.92 24.5406 135.28 35.5977 143.339C60.9111 443.925 84 454.607 125 454.607s64.089-10.682 80.111-22.359Z" fill="none" stroke="#B9B9B9" stroke-width="4"/>
    </clipPath>
    <g clip-path="url(#clip)">
    <svg x="0px" y="130px" viewBox="0 0 136 195">
         <path fill="#04ACFF" id="waveShape" d="M300,300V2.5c0,0-0.6-0.1-1.1-0.1c0,0-25.5-2.3-40.5-2.4c-15,0-40.6,2.4-40.6,2.4c-12.3,1.1-30.3,1.8-31.9,1.9c-2-0.1-19.7-0.8-32-1.9c0,0-25.8-2.3-40.8-2.4c-15,0-40.8,2.4-40.8,2.4c-12.3,1.1-30.4,1.8-32,1.9c-2-0.1-20-0.8-32.2-1.9c0,0-3.1-0.3-8.1-0.7V300H300z"/>
    </svg>
    <use href="#bottle"/>
    <path id="bottle" d="M19 135.503c111.2 34.307 136 66.752 106 116.339-30-49.587-5.2-83.535 106-116.339M89.6174 72.5661H160.383" fill="none" stroke="#B9B9B9" stroke-width="4"/>
</svg>
</div>

    • 3
    1. 从两个瓶子开始，一个是空的（有描边但没有填充），另一个是满的（有填充但没有描边）
    2. 对整个瓶子应用波浪形剪切路径
    3. 将空瓶叠放在满瓶上面

    在此处输入图片描述

    html, body {
  height: 100%;
}

body {
  margin: 0;
  padding: 1em;
  display: flex;
  justify-content: center;
  box-sizing: border-box;
}
    <svg viewBox="0 0 250 457" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <clipPath id="clip-0">
      <path d="M 2.351 173.377 C 2.351 173.377 23.671 187.243 46.351 187.523 C 70.171 187.817 76.561 174.532 100.371 175.097 C 123.381 175.643 133.281 189.055 156.301 189.408 C 167.591 189.581 192.131 175.828 209.071 174.351 C 228.711 172.637 250.341 184.136 250.121 184.142 L 250.121 457.042 L 0.121 457.042 L 0.121 173.342 L 2.351 173.377 Z" style="stroke: rgb(0, 0, 0); stroke-width: 0px; fill: rgb(255, 255, 255);"/>
    </clipPath>
  </defs>
  <path id="path-1" d="M 125.081 454.65 C 84.081 454.65 60.991 443.968 44.971 432.291 C 33.911 424.232 17.271 362.872 9.371 288.952 C 0.061 201.802 2.651 173.422 19.081 135.542 C 35.001 93.262 77.681 74.122 89.681 72.642 L 89.781 2.042 L 160.461 2.042 L 160.481 72.642 C 173.281 74.402 215.161 93.262 231.081 135.542 C 246.741 169.742 250.101 201.802 240.791 288.952 C 232.891 362.872 216.251 424.232 205.191 432.291 C 189.171 443.968 166.081 454.65 125.081 454.65 Z" stroke="#B9B9B9" style="clip-path: url(&quot;#clip-0&quot;); fill: rgb(0, 251, 255); stroke-width: 0px;"/>
  <path id="bottle" d="M 125.121 454.649 C 84.121 454.649 61.031 443.967 45.011 432.29 C 33.951 424.231 17.311 362.871 9.411 288.951 C 0.101 201.804 2.691 173.423 19.121 135.542 C 35.041 93.265 77.721 74.119 89.721 72.642 L 89.821 2.042 L 160.501 2.042 L 160.521 72.642 C 173.321 74.404 215.201 93.265 231.121 135.542 C 246.781 169.746 250.141 201.804 240.831 288.951 C 232.931 362.871 216.291 424.231 205.231 432.29 C 189.211 443.967 166.121 454.649 125.121 454.649 Z" stroke="#B9B9B9" stroke-width="4" style="fill: none;"/>
</svg>

    使用 SVG 编辑器是实现这些结果的最佳方式。我推荐Boxy SVG。

    • 3

相关问题