How to apply a gradient to a marker? - svg

Question

In SVG, how to apply the gradient applied to a line to its marker-end ?
<?xml version='1.0' encoding='UTF-8' standalone="yes"?>
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="820px"
height="500px"
viewBox="0 0 820 500"
version="1.1" >
<style>
.axis3 {
stroke-width: 40px;
marker-end:url(#arrow);
stroke: url('#gradient_3');
fill: url('#gradient_3');
height: 30px;
}
.axis4 {
stroke-width: 40px;
marker-end:url(#arrow);
stroke: url('#gradient_4');
fill: url('#gradient_4'); /* corrected */
height: 30px;
}
</style>
<defs>
<marker
id="arrow"
markerWidth="20"
markerHeight="40"
refX="0"
refY="20"
orient="auto"
markerUnits="userSpaceOnUse"
style="fill:inherit;">
<path style="stroke:none;fill:inherit;overflow:visible;" d="M0 0 L20 20 L0 40 Z" />
</marker>
<linearGradient id="gradient_3" x1="0%" y1="0%" x2="100%" y2="0%" gradientUnits="userSpaceOnUse" >
<stop offset="0%" stop-color="yellow" />
<stop offset="20%" stop-color="red" />
</linearGradient>
<linearGradient id="gradient_4" x1="0%" y1="0%" x2="100%" y2="0%" gradientUnits="userSpaceOnUse" >
<stop offset="0%" stop-color="blue" />
<stop offset="20%" stop-color="green" />
</linearGradient>
</defs>
<line class="axis3" x1="50" x2="400" y1="50" y2="50" />
<line class="axis4" x1="50" x2="400" y1="100" y2="100" />
</svg>
With the code above, marker is always black.
As there are several elements line with different gradients, gradient can not be applied directly on the path.
I tried to add style="fill:inherit" - with no success.

Answer 1

This is how I would do it:
Instead of fill:inherit; I'm setting two css variables for the svg element: style="--fill:url(#gradient_3); --stroke:url(#gradient_4)". Both the line and the marker are using those variables for the fill and the stroke.
Alternatively you may choose to use the gradients directly in the code <path style="overflow:visible;fill:url(#gradient_3);"...
To your code I've added a #gradient_3 since you are using it.
<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="820px"
height="500px"
viewBox="0 0 820 500"
version="1.1"
style="--fill:url(#gradient_3); --stroke:url(#gradient_4)">
<style>
.axis {
stroke-width: 40px;
marker-end:url(#arrow);
height: 30px;
stroke:var(--stroke);
}
</style>
<defs>
<marker
id="arrow"
markerWidth="20"
markerHeight="40"
refX="0"
refY="20"
orient="auto"
markerUnits="userSpaceOnUse">
<path style="overflow:visible;fill:var(--fill);" d="M0 0 L20 20 L0 40 Z" />
</marker>
<linearGradient id="gradient_3" x1="0%" y1="0%" x2="100%" y2="0%" gradientUnits="userSpaceOnUse" >
<stop offset="0%" stop-color="green" />
<stop offset="20%" stop-color="blue" />
</linearGradient>
<linearGradient id="gradient_4" x1="0%" y1="0%" x2="100%" y2="0%" gradientUnits="userSpaceOnUse" >
<stop offset="0%" stop-color="blue" />
<stop offset="20%" stop-color="green" />
</linearGradient>
</defs>
<line class="axis" x1="50" x2="400" y1="50" y2="50" />
</svg>

Answer 2

Answer to "Make marker-end same color as path?" mentions that there is no inheritance of colors from related path.
Situation has not evolve since this answer.