使用多种颜色根据百分比填充SVG路径。

huangapple
go评论64阅读模式
英文:

Filling an SVG path with multiple colors according too the percentage

问题

抱歉，您的要求是只翻译代码部分，以下是代码的翻译部分：

<path
      mask="url(#juiceMaskId)"
      id="juice"
      d="M450,1511.96s-6.64,47.58-25.29,59.53c-18.65,11.95-144.32,17.44-202.06,17.62-57.75,
      .18-140.98-2.96-185.18-14.71-44.2-11.75-35.84-54.23-35.84-54.23,0,0-.12-579.18,2.92-692.99,
      3.04-113.8,53.64-226.06,87.33-316.19,23.67-63.33,39.65-171.1,47.06-229.58,3.23-25.47,4.24-51.15
      ,3.04-76.8l-7.4-157.44,11.84-15.33,147.75-7.25,6.85,18.66,2.32,197.01s5.44,110.39,27.79,
      195.24c22.34,84.85,53.14,156.09,87.46,268.08,34.32,111.99,31.29,229.2,31.29,229.2l.12,579.17Z"

      style="fill: rgb(255, 187, 0);"
    />

希望对您有所帮助。如果您需要进一步的帮助，请随时提问。

英文:

Hey I´m still learning english so sorry.
I want to fill a path with 3 colors side by side.
In my case it´s 84.9% lightred, 7.7% lightblue and 7.9% lightgreen

here is my code. I´m new in coding and couldn´t find a way to fill the path accordingly. just in one color.

<path
      mask="url(#juiceMaskId)"
      id="juice"
      d="M450,1511.96s-6.64,47.58-25.29,59.53c-18.65,11.95-144.32,17.44-202.06,17.62-57.75,
      .18-140.98-2.96-185.18-14.71-44.2-11.75-35.84-54.23-35.84-54.23,0,0-.12-579.18,2.92-692.99,
      3.04-113.8,53.64-226.06,87.33-316.19,23.67-63.33,39.65-171.1,47.06-229.58,3.23-25.47,4.24-51.15
      ,3.04-76.8l-7.4-157.44,11.84-15.33,147.75-7.25,6.85,18.66,2.32,197.01s5.44,110.39,27.79,
      195.24c22.34,84.85,53.14,156.09,87.46,268.08,34.32,111.99,31.29,229.2,31.29,229.2l.12,579.17Z"

      style="fill: rgb(255, 187, 0);"
    />

can I set the 'fill' attribute too an percentage? side by side

help would be appreciated 使用多种颜色根据百分比填充SVG路径。

I tried to fill it 3 times but did not know how to separate it

答案1

得分: 3

可以使用以下方式为一个路径填充多种颜色：linearGradient

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"
    width="10%" height="50%" viewBox="1 24 452 1568" preserveAspectRatio="xMinYMin meet"  >  
<defs>
 <linearGradient id="Lg" x2="0" y2="100%">
  <stop offset="0" stop-color="pink"/>
   <stop offset="7.7%" stop-color="pink"/> 
  <stop offset="7.7%" stop-color="lightblue"/>
  <stop offset="84.9%" stop-color="lightgreen"/>
</linearGradient>
</defs>
<path id="path" stroke="black" stroke-width="2" fill="url(#Lg)"
      
      d="M450,1511.96s-6.64,47.58-25.29,59.53c-18.65,11.95-144.32,17.44-202.06,17.62-57.75,
      .18-140.98-2.96-185.18-14.71-44.2-11.75-35.84-54.23-35.84-54.23,0,0-.12-579.18,2.92-692.99,
      3.04-113.8,53.64-226.06,87.33-316.19,23.67-63.33,39.65-171.1,47.06-229.58,3.23-25.47,4.24-51.15
      ,3.04-76.8l-7.4-157.44,11.84-15.33,147.75-7.25,6.85,18.66,2.32,197.01s5.44,110.39,27.79,
      195.24c22.34,84.85,53.14,156.09,87.46,268.08,34.32,111.99,31.29,229.2,31.29,229.2l.12,579.17Z"
     
    /> 
</svg>

要获得清晰（非模糊）的颜色边界，需要重复stop offset的边界值：

<linearGradient id="Lg" x2="0" y2="100%">
  <stop offset="0" stop-color="pink"/>
  <stop offset="7.7%" stop-color="pink"/>
  <stop offset="7.7%" stop-color="lightblue"/>
  <stop offset="15.6%" stop-color="lightblue"/>
  <stop offset="15.6%" stop-color="lightgreen"/>
  <stop offset="84.9%" stop-color="lightgreen"/>
</linearGradient>
英文:

It is possible to fill one Path with multiple colors using: linearGradient

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

&lt;svg version=&quot;1.1&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; 
    xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot;
       width=&quot;10%&quot; height=&quot;50%&quot; viewBox=&quot;1 24 452 1568&quot; preserveAspectRatio=&quot;xMinYMin meet&quot;  &gt;  
&lt;defs&gt;
 &lt;linearGradient id=&quot;Lg&quot; x2=&quot;0&quot; y2=&quot;100%&quot;&gt;
  &lt;stop offset=&quot;0&quot; stop-color=&quot;pink&quot;/&gt;
   &lt;stop offset=&quot;7.7%&quot; stop-color=&quot;pink&quot;/&gt; 
  &lt;stop offset=&quot;7.7%&quot; stop-color=&quot;lightblue&quot;/&gt;
  &lt;stop offset=&quot;84.9%&quot; stop-color=&quot;lightgreen&quot;/&gt;
&lt;/linearGradient&gt;
&lt;/defs&gt;
&lt;path id=&quot;path&quot; stroke=&quot;black&quot; stroke-width=&quot;2&quot; fill=&quot;url(#Lg)&quot;
      
      d=&quot;M450,1511.96s-6.64,47.58-25.29,59.53c-18.65,11.95-144.32,17.44-202.06,17.62-57.75,
      .18-140.98-2.96-185.18-14.71-44.2-11.75-35.84-54.23-35.84-54.23,0,0-.12-579.18,2.92-692.99,
      3.04-113.8,53.64-226.06,87.33-316.19,23.67-63.33,39.65-171.1,47.06-229.58,3.23-25.47,4.24-51.15
      ,3.04-76.8l-7.4-157.44,11.84-15.33,147.75-7.25,6.85,18.66,2.32,197.01s5.44,110.39,27.79,
      195.24c22.34,84.85,53.14,156.09,87.46,268.08,34.32,111.99,31.29,229.2,31.29,229.2l.12,579.17Z&quot;
     
    /&gt; 
&lt;/svg&gt;

<!-- end snippet -->

To get clear (non-blurry) borders between colors, it is necessary to repeat the border values of stop offset

&lt;linearGradient id=&quot;Lg&quot; x2=&quot;0&quot; y2=&quot;100%&quot;&gt;
  &lt;stop offset=&quot;0&quot; stop-color=&quot;pink&quot;/&gt;
  &lt;stop offset=&quot;7.7%&quot; stop-color=&quot;pink&quot;/&gt;
  &lt;stop offset=&quot;7.7%&quot; stop-color=&quot;lightblue&quot;/&gt;
  &lt;stop offset=&quot;15.6%&quot; stop-color=&quot;lightblue&quot;/&gt;
  &lt;stop offset=&quot;15.6%&quot; stop-color=&quot;lightgreen&quot;/&gt;
  &lt;stop offset=&quot;84.9%&quot; stop-color=&quot;lightgreen&quot;/&gt;
&lt;/linearGradient&gt;

<!-- begin snippet: js hide: true console: true babel: false -->

<!-- language: lang-html -->

&lt;svg version=&quot;1.1&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; 
    xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot;
       width=&quot;10%&quot; height=&quot;50%&quot; viewBox=&quot;1 24 452 1568&quot; preserveAspectRatio=&quot;xMinYMin meet&quot;  &gt;  
&lt;defs&gt;
 &lt;linearGradient id=&quot;Lg&quot; x2=&quot;0&quot; y2=&quot;100%&quot;&gt;
  &lt;stop offset=&quot;0&quot; stop-color=&quot;pink&quot;/&gt;
  &lt;stop offset=&quot;7.7%&quot; stop-color=&quot;pink&quot;/&gt;
  &lt;stop offset=&quot;7.7%&quot; stop-color=&quot;lightblue&quot;/&gt;
  &lt;stop offset=&quot;15.6%&quot; stop-color=&quot;lightblue&quot;/&gt;
  &lt;stop offset=&quot;15.6%&quot; stop-color=&quot;lightgreen&quot;/&gt;
  &lt;stop offset=&quot;84.9%&quot; stop-color=&quot;lightgreen&quot;/&gt;
&lt;/linearGradient&gt;
&lt;/defs&gt;
&lt;path id=&quot;path&quot; stroke=&quot;black&quot; stroke-width=&quot;2&quot; fill=&quot;url(#Lg)&quot;
      
      d=&quot;M450,1511.96s-6.64,47.58-25.29,59.53c-18.65,11.95-144.32,17.44-202.06,17.62-57.75,
      .18-140.98-2.96-185.18-14.71-44.2-11.75-35.84-54.23-35.84-54.23,0,0-.12-579.18,2.92-692.99,
      3.04-113.8,53.64-226.06,87.33-316.19,23.67-63.33,39.65-171.1,47.06-229.58,3.23-25.47,4.24-51.15
      ,3.04-76.8l-7.4-157.44,11.84-15.33,147.75-7.25,6.85,18.66,2.32,197.01s5.44,110.39,27.79,
      195.24c22.34,84.85,53.14,156.09,87.46,268.08,34.32,111.99,31.29,229.2,31.29,229.2l.12,579.17Z&quot;
     
    /&gt; 
&lt;/svg&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年1月9日 01:20:43
  • 转载请务必保留本文链接：https://go.coder-hub.com/75049884.html
  • css
  • html
  • svg
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定