xml 使用CSS的SVG渐变

Posted 2021-05-16

.hatching-pattern-1 .shape {
  fill:url(#hatching-pattern-1-gradient);
}

.hatching-pattern-1 .stop-1 {
  stop-color: red; 
}

.hatching-pattern-1 .stop-2 { 
  stop-color: red; 
  stop-opacity: 0;
}

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 20" class="hatching-pattern-1" role="presentation">
  <linearGradient x1="0%" y1="50%" x2="100%" y2="50%" id="hatching-pattern-1-gradient">
    <stop offset="5%" class="stop-1"/>
    <stop offset="95%" class="stop-2"/>
  </linearGradient>
  <path
    class="shape"
    gradientUnits="objectBoundingBox"
    d="M2.22 5.83l1.42 1.42.89.12-1.72-1.73-.59.19zM6.44 4.46l3.65 3.64.89.12-3.95-3.95-.59.19zM10.66 3.09l5.87 5.87.89.11-6.17-6.17-.59.19zM14.89 1.72l8.09 8.09.88.12-8.39-8.4-.58.19zM19.42.66l10 10 .89.12L19.81.28l-.39.38zM25.27.41l-.1.09-.16.16 10.86 10.85.88.12L25.4.28l-.13.13zM30.86.41l-.09.09-.16.16 11.7 11.7.89.12L30.99.28l-.13.13zM36.45.41l-.09.09-.16.16 12.55 12.56.89.11L36.58.28l-.13.13zM42.05.41l-.1.09-.16.16L55.2 14.07l.89.12L42.18.28l-.13.13zM47.64.41l-.1.09-.16.16 14.26 14.26.89.12L47.77.28l-.13.13zM53.23.41l-.1.09-.15.16 15.11 15.11.88.12L53.36.28l-.13.13zM58.82.41l-.09.09-.16.16 15.96 15.97.89.11L58.95.28l-.13.13zM64.42.41l-.1.09-.16.16 16.81 16.82.89.11L64.55.28l-.13.13zM70.01.41l-.1.09-.16.16 17.67 17.67.89.12L70.14.28l-.13.13zM75.73.28l-.13.13-.1.09-.16.16 17.82 17.82.28-.49L75.73.28zM81.32.28l-.13.13-.1.09-.15.16 14.28 14.29.28-.49L81.32.28zM86.91.28l-.13.13-.09.09-.16.16 10.75 10.75.28-.48L86.91.28zM92.51.28l-.13.13-.1.09-.16.16 7.22 7.22.29-.49L92.51.28zM0 6.55l.25.25.89.12-.56-.55-.58.18zM4.22 5.18l2.47 2.48.89.11L4.8 4.99l-.58.19zM8.44 3.81l4.7 4.7.89.12-5.01-5.01-.58.19zM12.66 2.44l6.92 6.92.89.12-7.23-7.23-.58.19zM16.88 1.07l9.15 9.14.88.12L17.47.88l-.59.19zM22.07.66l10.4 10.4.89.12L22.45.28l-.38.38zM28.05.28l-.08.07-.31.31 11.25 11.25.89.12-3.23-3.23L28.05.28zM33.64.28l-.08.07-.31.31 12.11 12.11.89.11-4.08-4.08L33.64.28zM39.23.28l-.08.07-.31.31L51.8 13.62l.89.12-4.93-4.94L39.23.28zM44.82.28l-.08.07-.3.31 13.81 13.81.89.12-5.79-5.79L44.82.28zM50.41.28l-.07.07-.31.31 14.66 14.66.89.12-6.64-6.64L50.41.28zM56.01.28l-.08.07-.31.31 15.52 15.52.89.11-7.5-7.49L56.01.28zM61.6.28l-.08.07-.31.31 16.37 16.37.89.12-8.34-8.35L61.6.28zM67.19.28l-.08.07-.3.31 17.22 17.22.88.12-9.19-9.2L67.19.28zM72.78.28l-.07.07-.31.31 18.07 18.07.89.12L81.31 8.8 72.78.28zM86.9 8.8L78.38.28l-.08.07-.31.31L94.14 16.8l.28-.48L86.9 8.8zM92.5 8.8L83.97.28l-.08.07-.31.31L96.2 13.27l.28-.48L92.5 8.8zM98.09 8.8L89.56.28l-.08.07-.31.31 9.09 9.08.28-.49-.45-.45z">
  </path>
</svg>