如何将渐变应用于标记？答案

【问题标题】：How to apply a gradient to a marker?如何将渐变应用于标记？
【发布时间】：2023-03-29 01:14:02
【问题描述】：

在 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" - 没有成功。

【问题讨论】：

Vivaldi 和 Chrome 本身不会在标记端应用渐变。 Internet Explorer 本机在标记端应用渐变 - 除了它的渲染是在标记开始时预期的...

标签： svg gradient marker

【解决方案1】：

对“Make marker-end same color as path?”的回答提到没有从相关路径继承颜色。自此答案以来，情况并未发生变化。

【讨论】：

【解决方案2】：

我会这样做：

我为 svg 元素设置了两个 css 变量，而不是 fill:inherit;：style="--fill:url(#gradient_3); --stroke:url(#gradient_4)"。线和标记都将这些变量用于fill 和stroke。

您也可以选择直接在代码<path style="overflow:visible;fill:url(#gradient_3);"...中使用渐变

由于您正在使用它，我在您的代码中添加了#gradient_3。

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

【讨论】：

感谢您的反馈：我已经澄清了我的需求。