在SVG中,如何将应用于线的渐变应用于其标记端?
<?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>
使用上面的代码,标记始终为黑色。
由于存在多个具有不同梯度的元素线,因此不能将梯度直接应用于路径。 我试图添加style =“ fill:inherit”-没有成功。