Usando o ponto de código para renderizar o ícone delineado em vez de preenchido no Material Design Google Fonts

Question

user29587692

Asked: 2025-03-07 04:23:11 +0800 CST2025-03-07 04:23:11 +0800 CST 2025-03-07 04:23:11 +0800 CST

Como posso fazer com que um caminho/preenchimento SVG seja desenhado apenas "dentro" de outro caminho SVG complexo?

772

Tenho uma forma de garrafa em SVG que tem um redemoinho decorativo e algumas outras linhas cruzando o interior, de modo que não tenho certeza do que conta como "dentro" e "fora" do caminho. Quero colocar uma forma de onda "dentro" da garrafa, mas não estou obtendo nenhum resultado positivo experimentando <clipPath>e não tenho certeza se as linhas internas da garrafa estão trabalhando contra mim.

O que eu tenho atualmente, onde a forma de onda fica na parte superior da garrafa:

  * {
    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>

Cercar o caminho da garrafa com uma <clipPath>etiqueta faz com que apenas a forma da onda apareça:

  * {
    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>

Ao redor do caminho da onda é <clipPath>exibida apenas a garrafa:

  * {
    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>

Este é o caminho da garrafa carregado em um editor SVG do navegador: 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

2 respostas

Voted

ccprog · Answer 1 · 2025-03-07T08:52:29+08:00

Muitas coisas precisam ser feitas para que seu código funcione. Mas primeiro, um pouco de limpeza:

version="1.1", style="enable-background:new 0 0 136 195;"e xml:space="preserve"não têm absolutamente nenhum efeito. Apenas delete-os.
xmlns="http://www.w3.org/2000/svg"e xmlns:xlink="http://www.w3.org/1999/xlink"não são necessários se você escrever código SVG inline dentro de uma página HTML. Mas note que se você deixar de fora o xmlns:xlinkatributo, todas as ocorrências de xlink:hreftambém terão que ser encurtadas para href.
Você quer desenhar as linhas que representam a garrafa na frente da área azul que representa o conteúdo. Portanto, precisa estar mais abaixo no código-fonte.

Vamos dar uma olhada em um resultado provisório, deixando de fora o caminho do clipe:

* {
    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>

Agora a parte mais importante: um clip-path expressa um relacionamento entre duas entidades: um elemento gráfico, no seu caso um <svg>elemento, é recortado para uma área expressa como uma forma geométrica, aqui apenas outro <path>elemento. Envolver um elemento com um <clipPath>não faz exatamente nada, pois a relação com o outro elemento está faltando.

O padrão geral se parece com este

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

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

O relacionamento "o gráfico é recortado pelo formulário" é expresso com o atributo clip-path="url(#clip)". Tudo escrito dentro do <clipPath>elemento não é renderizado . Ele é apenas interpretado como a fonte do recorte.

No seu caso, as coisas se complicam com a aplicação de um clip path a um <svg>elemento. O raciocínio de como os atributos viewBoxe clip-pathinteragem e por que os resultados parecem como são é muito sutil e não é fácil de entender. Na maioria das vezes, é mais fácil envolver o <svg>com um <g>elemento e aplicar o clip path a ele.

Se você quiser ter um caminho usado tanto como o formulário para usar como uma fonte de recorte, quanto desenhado como um gráfico, ele precisa aparecer em dois lugares no seu código. Felizmente, você pode facilmente reutilizar o conteúdo com um <use>elemento. O padrão geral se parece com isso:

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

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

Mas antes de fazer isso, pense no seu gráfico e como ele foi representado no editor do navegador. As áreas mostradas em cinza são o que será interpretado como "dentro", todo o resto é "fora". Claramente não é isso que você quis dizer. No seu caso, a razão está na estrutura um tanto caótica do caminho, que na verdade é composto de nove (!) subcaminhos independentes, cada um dos quais tem seus próprios interiores/exteriores.

Limpar esse código é uma tarefa para a qual o site SvgPathEditor não é realmente adequado. Você precisa de um editor gráfico vetorial completo como o Illustrator ou o Inkscape para fazer isso efetivamente. O que exatamente precisa ser feito é muito complexo para uma breve descrição aqui, eu apenas apresento a você o resultado. Você precisa ter um formulário que represente o formulário externo e um separado para tudo mostrado no interior desse formulário. Apenas o primeiro é usado para o recorte:

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

Brett Donald · Answer 2 · 2025-03-07T09:13:19+08:00

Comece com duas garrafas, uma vazia (com curso, mas sem enchimento) e uma cheia (com curso, mas sem enchimento)
Aplique um clip-path ondulado em toda a garrafa
Empilhe a garrafa vazia em cima da cheia

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>

Usar um editor SVG é a melhor maneira de atingir esses resultados. Eu recomendo o Boxy SVG .

Como posso fazer com que um caminho/preenchimento SVG seja desenhado apenas "dentro" de outro caminho SVG complexo?

Por que os conceitos do C++20 causam erros de restrição cíclica, enquanto o SFINAE antigo não?

Problema com extensão desinstalada automaticamente do VScode (tema Material)

Vue 3: Erro na criação "Identificador esperado, mas encontrado 'import'" [duplicado]

Qual é o propósito de `enum class` com um tipo subjacente especificado, mas sem enumeradores?

Como faço para corrigir um erro MODULE_NOT_FOUND para um módulo que não importei manualmente?

`(expression, lvalue) = rvalue` é uma atribuição válida em C ou C++? Por que alguns compiladores aceitam/rejeitam isso?

Quando devo usar um std::inplace_vector em vez de um std::vector?

Um programa vazio que não faz nada em C++ precisa de um heap de 204 KB, mas não em C

PowerBI atualmente quebrado com BigQuery: problema de driver Simba com atualização do Windows

AdMob: MobileAds.initialize() - "java.lang.Integer não pode ser convertido em java.lang.String" para alguns dispositivos

Como posso fazer com que um caminho/preenchimento SVG seja desenhado apenas "dentro" de outro caminho SVG complexo?

2 respostas

relate perguntas