Question

我正在尝试创建一个背景，其中包含从左到右从绿色到黄色渐变的多个点。所以他们的想法是创建一个路径，用一个带有模式的渐变和剪辑路径填充它：

https://codepen.io/Deka87/pen/pLPqJE?editors=1000

<svg width='100' height='100' viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <linearGradient id="img-dotted-gradient">
      <stop offset="0%" stop-color="green"></stop>
      <stop offset="100%" stop-color="yellow"></stop>
    </linearGradient>
    <pattern id="img-dotted-dots" x="0" y="0" width=".1" height=".1">
      <circle cx="2" cy="2" r="2" fill="green"></circle>
    </pattern>
  </defs>
  <path d="M0 0 H 100 V 100 H 0 Z" fill="url(#img-dotted-gradient)" clip-path="url(#img-dotted-dots)"></path>
</svg>

渐变效果正常，剪辑路径工作正常（独立）。然而，他们没有走到一起。任何帮助将不胜感激！

Answer 1

只有<mask>中元素的形状才有意义。颜色和填充将被忽略，因此您不能这样做。

但您可以使用<svg width='100' height='100' viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <linearGradient id="img-dotted-gradient"> <stop offset="0%" stop-color="green"></stop> <stop offset="100%" stop-color="yellow"></stop> </linearGradient> <pattern id="img-dotted-dots" x="0" y="0" width=".1" height=".1"> <circle cx="2" cy="2" r="2" fill="white"></circle> </pattern> <mask id="img-dotted-mask"> <rect width="100" height="100" fill="url(#img-dotted-dots)"/> </mask> </defs> <path d="M0 0 H 100 V 100 H 0 Z" fill="url(#img-dotted-gradient)" mask="url(#img-dotted-mask)"></path> </svg>代替。

library(tibble)
library(dplyr)

set.seed(42)
N <- 10
Df <- tibble(p_1 = rnorm(N),
             p_2 = rnorm(N),
             q_1 = rnorm(N),
             q_2 = rnorm(N))

# Works fine
Df %>% mutate(total = apply(., 1, sum))

在SVG

1 个答案: