主页 / user-29587692

user29587692's questions

Martin Hope
user29587692
Asked: 2025-03-07 04:23:11 +0800 CST
  • 5

我在 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