我试图添加一个svg背景,并在Javascript中滚动绘制它
这是我在CSS中为背景编写的代码,上面有一个线性渐变,SVG作为原始背景我试图添加一个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%,
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这样的库来设置笔划动画。