我试图添加一个svg背景,并在Javascript中滚动绘制它

我试图添加一个svg背景,并在Javascript中滚动绘制它,javascript,css,vue.js,svg,sass,Javascript,Css,Vue.js,Svg,Sass,这是我在CSS中为背景编写的代码,上面有一个线性渐变,SVG作为原始背景 background-image: linear-gradient( to bottom left, rgba(34, 148, 82, 1), rgba(40, 121, 75, 0.4) ), url(../../assets/abc.svg); clip-path: polygon( 100% 0%, 0% 0%, 0% 100%,

这是我在CSS中为背景编写的代码,上面有一个线性渐变,SVG作为原始背景

background-image: linear-gradient(
      to bottom left,
      rgba(34, 148, 82, 1),
      rgba(40, 121, 75, 0.4)
    ),
    url(../../assets/abc.svg);
  clip-path: polygon(
    100% 0%,
    0% 0%,
    0% 100%,
    1% 99.95%,
    2% 99.8%,
    3% 99.6%,
    4% 99.3%,
    5% 98.9%,
    6% 98.45%,
    7% 97.9%,
    8% 97.25%,
    9% 96.55%,
    10% 95.8%,
    11% 94.95%,
    12% 94.05%,
    13% 93.1%,
    14% 92.1%,
    15% 91.05%,
    16% 90%,
    17% 88.9%,
    18% 87.8%,
    19% 86.65%,
    20% 85.5%,
    21% 84.35%,
    22% 83.2%,
    23% 82.05%,
    24% 80.9%,
    25% 79.8%,
    26% 78.75%,
    27% 77.75%,
    28% 76.75%,
    29% 75.8%,
    30% 74.9%,
    31% 74.1%,
    32% 73.35%,
    33% 72.65%,
    34% 72.05%,
    35% 71.5%,
    36% 71.05%,
    37% 70.65%,
    38% 70.35%,
    39% 70.15%,
    40% 70.05%,
    41% 70%,
    42% 70.05%,
    43% 70.2%,
    44% 70.45%,
    45% 70.75%,
    46% 71.15%,
    47% 71.65%,
    48% 72.2%,
    49% 72.85%,
    50% 73.55%,
    51% 74.35%,
    52% 75.2%,
    53% 76.1%,
    54% 77.05%,
    55% 78.05%,
    56% 79.1%,
    57% 80.15%,
    58% 81.3%,
    59% 82.4%,
    60% 83.55%,
    61% 84.7%,
    62% 85.85%,
    63% 87%,
    64% 88.15%,
    65% 89.25%,
    66% 90.35%,
    67% 91.4%,
    68% 92.45%,
    69% 93.4%,
    70% 94.35%,
    71% 95.2%,
    72% 96.05%,
    73% 96.8%,
    74% 97.45%,
    75% 98.05%,
    76% 98.6%,
    77% 99.05%,
    78% 99.4%,
    79% 99.7%,
    80% 99.85%,
    81% 100%,
    82% 100%,
    83% 99.9%,
    84% 99.75%,
    85% 99.5%,
    86% 99.2%,
    87% 98.75%,
    88% 98.25%,
    89% 97.7%,
    90% 97.05%,
    91% 96.3%,
    92% 95.5%,
    93% 94.65%,
    94% 93.75%,
    95% 92.8%,
    96% 91.8%,
    97% 90.75%,
    98% 89.65%,
    99% 88.55%,
    100% 87.4%
  );

现在我想做的是,我想在向下滚动页面时绘制SVG。请记住,svg只有路径,但路径是多个的。数百条没有ID的路径


我在Vue.js中的一个组件中使用了它,如果有人能帮我解决这个问题,我将不胜感激。

你所说的“绘制”是什么意思。你的意思是想在滚动时“显示”背景图像吗?或者您是在尝试“绘制”svg图像的线条?如果是后者,可以研究一下,但请注意它不能与背景图像一起工作-它需要是一个内联svg。是的,类似的东西,但需要在背景中,或者如果我添加了内联,它能坚持到背景中吗?是的,你要找的是css的
位置:fixed
,这将导致HTML中的任何元素都被删除“卡在”背景上。抱歉,但您的问题可能太模糊,无法得到一个好的答案。我认为您试图做的与
剪辑路径无关,您可能需要编写一些javascript来跟踪页面滚动,并使用像GreenSock这样的库来设置笔划动画。