首页 / 技术问答 / Html问答列表 / 问答详情

Html 根据百分比用多种 colored颜色 填充SVG路径

嘿，我还在学英语，对不起. 我想用3种 colored颜色 并排填充一条小路. 在我的例子中，84.9%是淡红色，7.7%是淡蓝色，7.9%是淡绿色

这是我的代码.我在编码方面是新手，找不到相应的方法来填充路径.只有一种 colored颜色 .

<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);"
    />

我可以将‘Fill’属性也设置为百分比吗？并肩而行

如有帮助，我们将不胜感激:)

我试着填了3次，但不知道怎么分开

推荐答案

可以使用:linearGradient用多种 colored颜色 填充一条路径

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

要使 colored颜色 之间的边框清晰(非模糊)，需要重复边框值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>


<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="15.6%" stop-color="lightblue"/>
  <stop offset="15.6%" stop-color="lightgreen"/>
  <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>

Html相关问答推荐

如何将值从Google Sheets侧边栏中的表单中的输入传递到Google Sheets单元格中使用Textile()

Select 包含iframe的图形<><>

每次在视口中运行动画

为什么XPath返回的元素比我预期的要多？

如何用等宽字体固定数字在有序列表中的位置

当文本添加到元素中时，将元素拉到页面上

HTMLTag属性内的svelte+TS类型声明

与窗高匹配的响应式正方形网格

阴影部分内部的ionic Select 元素

(HTML框架标签)点击后目标框架将不再工作

按钮悬停效果不影响按钮内的图标

为什么即使我点击其他地方，我的 contenteditable="true" 也会被激活？

如何在Rmarkdown中添加千位分隔符？

SVG 填充 colored颜色 不使用轮廓填充空白区域

ul li 右侧的 Bootstrap 加载微调器

在