CODEWITHSUNDEEP
svgd3.js
Ashiqur Rahman
Ashiqur Rahman

Reputation: 51

Arrow marker shaded in SVG d3

I have the following SVG for arrow marker:

  ` svg.append("svg:defs").append("svg:marker")
     .attr("id", "triangle")
     .attr("refX", 5)
     .attr("refY", 3)
     .attr("markerWidth", 7)
     .attr("markerHeight", 7)
     .attr("orient", "auto")
     .append("path")
      .attr("d", "M0,0 L0,6 L7,3 z")
      .attr("fill", 'url(#gradient2)'); 

    // Define the gradient
    var gradient2 = svg.append("svg:defs")
    .append("svg:linearGradient")
    .attr("id", "gradient2")
    .attr("x1", "0%")
    .attr("y1", "0%")
    .attr("x2", "100%")
    .attr("y2", "100%")
    .attr("spreadMethod", "pad");

   // Define the gradient colors
   gradient2.append("svg:stop")
   .attr("offset", "0%")
   .attr("stop-color", "#6c36f6")
   .attr("stop-opacity", 1);

   gradient2.append("svg:stop")
   .attr("offset", "100%")
   .attr("stop-color", "#8941f6")
   .attr("stop-opacity", 1); `

It's look like: enter image description here

I need shade in the middle of arrow marker. I can't use one more path and fill color in SVG d3. That's why I used linear-gradient in here but it also not working properly. I tried to make it in Inkscape, but I couldn't.

I need to make like this: enter image description here

please have a look.

Upvotes: 0

Views: 64

Answers (1)

Michael Mullany
Michael Mullany

Reputation: 31715

You have defined the gradient incorrectly. Here is an SVG markup version with the gradient defined properly. No offense, but this is a very basic mistake, so I'd recommend that you spend a day doing an SVG tutorial - otherwise you're going to keep getting in trouble on the basics.

  <svg width="800px" height="600px" viewBox="0 0 200 300">
    
    <defs>
      <linearGradient id="gradient2" x1="0%" y1="0%" x2="0%" y2="100%" spreadMethod="pad">
        <stop offset="0%" stop-color="#6c36f6"/>
        <stop offset="50%" stop-color="#6c36f6"/>
        <stop offset="51%" stop-color="#8941f6"/> 
        <stop offset="100%" stop-color="#8941f6"/>
      </linearGradient>
      
      <marker id="triangle" refX="5" refY="3" markerWidth="7" markerHeight="7" orient="auto">
        <path d="M0,0 L0,6 L7,3 z" fill="url(#gradient2)"/>
      </marker>
    </defs>
    
    <polyline points="50,50 50,100" stroke="red" stroke-width="5" marker-end="url(#triangle)"/>
</svg>

Upvotes: 4

Related Questions