Filling an Svg Path with Multiple Colors

Filling an SVG path with multiple colors

I think you would be able to use a linear gradient and use two color-stops for each solid color. Something like this

<svg height="200" width="600">  <defs>    <linearGradient id="solids" x1="0%" y1="0%" x2="100%" y2="0%">      <stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1" />      <stop offset="33%" style="stop-color:rgb(255,0,0);stop-opacity:1" />      <stop offset="33%" style="stop-color:rgb(0,255,0);stop-opacity:1" />      <stop offset="67%" style="stop-color:rgb(0,255,0);stop-opacity:1" />      <stop offset="67%" style="stop-color:rgb(0,0,255);stop-opacity:1" />      <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />    </linearGradient>  </defs>  <rect width="600" height="200" fill="url(#solids)" /></svg>

SVG / CSS - fill different paths with different colours

You can add a different class to each of the paths:

<circle  class="circleClass" cx="40" cy="50" r="26"/>
<square  class="squareClass"   cx="40" cy="50" r="26"/>

Then target those classes in your CSS:

.circleClass {
  fill: red;
}

SVG make different sections of the path in different colors

One solution would be to use the path twice: first the green one and next the one using stroke-dasharray. The dashes are only over the curves. If you don't like the position or the length of the dashes change them to what you need. The gaps are not sensitive to mouse events, only the dashes are.

In css I've added #gold:hover{cursor:pointer} so that you can see that only the dashes are sensitive to the mouse.

I hope it helps.

svg{border:1px solid}use{fill:none;stroke-width:18;}#gold:hover{cursor:pointer}

<svg viewBox="-10 50 580 360" width="580" height="360" xmlns="http://www.w3.org/2000/svg">  <defs>    <path id="svg_1" d="m555,272c1,0.76736 4,85.76736 -71,97.76736c-75,12 -387,-39 -388,-39.76736c0,-0.23264 -29,-1.23264 -45,-21.23264l-42,-124.76736c-3,-11.23264 -3,-21.23264 3,-26.23264c6,-5 46,-67 69,-69.76736l474,184z" />  </defs> <g>  <title>background</title>  <rect fill="#fff" id="canvas_background" height="360" width="580" x="-10" y="50"/> </g> <g>  <title>Layer 1</title>  <use xlink:href="#svg_1" stroke="green"  />   <use xlink:href="#svg_1" stroke="gold" stroke-dasharray ="130 370 110 60 90 40 90 400 52.45" id="gold" pointer-events="stroke" /> </g></svg>

How to fill SVG path with color upto a specific distance?

You can do it with stroke-dasharray:

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300">
<defs>
<style>
path{
  stroke-width: 10;
}
</style>
</defs>
<path d="M 10 10 l 100 0 c 10 10 10 10 0 50 l -100 0" stroke="black" fill="transparent" />
<path d="M 10 10 l 100 0 c 10 10 10 10 0 50 l -100 0" stroke="red" fill="transparent" pathLength="1" stroke-dasharray="0.6 0.4"/>
</svg>

Multiple color fill on SVG as component in React

I managed to use different colors by creating a component that return that SVG as JSX passing colors as props

const Icon = ({inside, outside}) => (
  <svg>
    <g>
      <path fill={outside} />
      <path fill={inside} />
    </g>
  </svg>
)

<Icon outside='#000' inside='red'/>

---

Related Topics