如何用SVG文本实现隐形铅笔效果?

时间:2017-04-23 13:49:08

标签: javascript html svg vivus

我正在尝试制作一个干净的徽标动画,隐形铅笔样式,带有徽标文字。

我正在使用vivus.js,这对脚本svg动画非常有用。

使用font "Alex Brush",我想在SVG中逐步显示一些文本,如下所示:



<svg xmlns="http://www.w3.org/2000/svg" width="151.184mm" height="25.387mm" viewBox="0 0 535.68974 89.954285"><g style="line-height:125%" font-size="105.087" font-family="Alex Brush" letter-spacing="0" word-spacing="0"><path d="M42.77 64.1q-2.52 3.9-2.52 5.05t.94 1.68q0 .1-1.9 1.57-1.68.85-3.78.85-2.1 0-3.05-.53-.94-.42-.63-1.47 1.47-4.73 11.04-18.92 9.56-14.3 12.82-20.17 7.04-12.72 7.04-20.3 0-3.14-1.05-5.34-2.12-4.3-10-4.3-12.3 0-25.43 10.6-10.5 8.5-16.08 18.08Q4.6 40.35 4.6 47.8q0 10.73 9.46 10.94.42 0 .84 0 12.1 0 18.7-8.72 2.53-3.47 2.53-5.88 0-2.42-1.05-3.05-.1-.12-.1-.43 0-.32.62-.32 2.74 0 2.74 3.58 0 2.2-2.2 6-2.1 3.77-7.58 7.13-5.46 3.36-12.7 3.36-7.26 0-11.57-4.5Q0 51.38 0 44q0-16.6 21.65-33.93 5.57-4.43 14.6-7.26Q45.4 0 53.7 0 62 0 64.94 2.94 68 5.78 68 10.6q0 7.37-6 19.88-1.9 3.88-8.5 14.18l8.08-10.3q5.9-7.67 20.4-21.85 3.14-3.04 6.92-5.04 3.9-2.1 6.62-2.1 3.8 0 3.8 4 0 3.46-3.38 10.5-3.25 6.94-6.62 13.24-3.36 6.2-4.1 8.2-.73 1.9-1.05 3.05-.3 1.15-.42 1.26.32-.52 6.94-7.98 6.6-7.57 19.54-18.8l16.8-13.88q2-1.68 3.58-1.68t2.52 2.62q1.06 2.63 1.06 4.3 0 1.6-5.05 6.74-13.13 13.45-22.28 29.42-9.14 15.98-9.14 22.8 0 1.8.63 2.42.63.74 2 .42 1.36-.2 5.67-2.1 4.42-1.9 5.78-2.2.54.2.54.52 0 1.58-5.57 4.4-5.47 2.85-8.3 2.85-2.74 0-3.37-.94-1.9-2.73-1.9-6.6 0-9.05 9.68-25.97 6.2-10.6 19.13-28.58-10.08 8.2-27.32 25.1-17.23 16.93-22.6 26.5-2.72 4.93-6.6 4.93-1.8 0-1.8-1.26 0-.42 2.1-3.78 2.2-3.36 9.57-15.76 18.07-31.43 18.07-37.84 0-1.68-1.15-1.68-1.7 0-4.94 2.84-11.67 9.77-24.8 25.54Q49.4 53.7 42.77 64.1z" style="-inkscape-font-specification:'Alex Brush'"/><path d="M111.9 80.6q5.03 6.3 8.7 6.3 6 0 12.94-9.56 5.04-7.04 9.87-17.76l4-9.66L131.97 62q-7.15 5.57-11.46 5.57-2.3 0-3.67-1.58t-1.37-3.58q0-4.52 7.78-14.82Q131 37.2 134.6 37.2q3.56 0 3.56 2.42 0 .94-9.35 10.93-9.24 9.87-9.24 13.34 0 1.36 1.8 1.36 3.35 0 13.44-7.88 10.2-7.88 15.34-13.03 1.16-1.37 3.26-4.1 2-2.3 4.4-2.3 2.43 0 2.43 2.3 0 .42-4.73 7.46-4.73 7.05-4.94 7.47-3.26 6.3-9.98 18.4-10.2 16.38-20.4 16.38-3.35 0-5.88-2.94-2.52-2.83-2.4-6.4z" style="-inkscape-font-specification:'Alex Brush'"/><path d="M204.72 34.57l15.13-.2q.32.2.32.3 0 .95-13.14 2.64-13.03 1.7-14.08 2-2 1.8-7.35 10.72-5.36 8.83-5.36 12.93 0 3.9 5.36 3.9 2.52 0 6.62-1.6 4.1-1.57 6.3-2.93 5.9-3.68 12.6-10.83 1.48-1.48 2-1.48.32 0 .32.63t-1.57 2.52Q206.4 59.9 199.57 64q-8.2 5.04-15.66 5.04-3.24 0-5.34-1.36-2-1.48-2-5.78 0-4.3 3.78-11.77 3.8-7.57 5.78-11.25-1.47.32-2.52.32-3.05 0-3.05-2.42 0-1.8 2.52-2.52.32 0 .95-.1h6.1q1.9-2.42 4.3-5.58 2.95-3.78 4-3.78 1.05 0 2.62.84 1.58.84 1.58 2 0 1.15-5.04 6.83 2.73.1 7.14.1z" style="-inkscape-font-specification:'Alex Brush'"/><path d="M213.85 69.78q-1.15 0-2.1-.32-6.73-1.9-6.73-7.56 0-7.36 9.25-17.03 9.25-9.67 16.6-9.67 2.42 0 3.9 1.37 1.57 1.26 1.57 3.15 0 5.9-8.93 11.25-8.82 5.36-14.4 5.36-.83 0-1.46-.2-1.58 2.82-1.58 5.98 0 5.47 5.15 5.47 5.27 0 13.57-7.04 6.4-5.15 10.93-10.93.94-1.26 1.57-1.26.74 0 .74.63t-.83 1.8Q235.4 58.2 227.4 64t-13.55 5.78zM233.7 39.5q0-1.25-2.72-1.25-2.63 0-7.57 4.1-6.6 5.46-10.28 11.45.63.2 1.36.2 4 0 10.62-4.2 6.72-4.3 8.4-9.34.2-.53.2-.95z" style="-inkscape-font-specification:'Alex Brush'"/><path d="M273.63 63.8q-7.57 6.3-12.6 6.3-4.95 0-6.53-7.26-.52-2.94-.74-8.83-12.82 13.68-19.23 24.7-.3.43-.84.43-1.27 0-1.27-1.16 0-.3.2-.52 9.8-15.45 21.13-27.1.43-14.4.53-16.2-2.43.53-10.3 12.2-3.9 5.88-6.84 9.03-2.94 3.15-3.47 3.68-.64.42-1.16.42-.63 0-.63-.53 0-.52 3.37-4.2 3.36-3.78 8.93-12.2 5.57-8.5 8-10.7 2.4-2.22 4.5-2.22t3.05.63q.95.53.64 2-.22 1.37-.44 2.42-.1 1.05-.2 2.42-.64 4.93-.74 8.1 5.15-4.95 23.22-20.3.2-.2.74-.2.52 0 1.37.94.84.84.84 1.8 0 .83-.85 1.67-3.37 2.74-11.77 8.84-8.3 6-13.77 11.03-.1 2.2-.1 6 0 3.77.95 6.93 1.26 4.1 4.62 4.1 6 0 18.5-14.4 1.05-1.05 1.58-1.05.52 0 .52.73 0 .63-.84 1.58-6.52 7.67-10.4 10.93z" style="-inkscape-font-specification:'Alex Brush'"/><path d="M307.96 34.57l15.13-.2q.3.2.3.3 0 .95-13.13 2.64-13.03 1.7-14.08 2-2 1.8-7.36 10.72-5.36 8.83-5.36 12.93 0 3.9 5.36 3.9 2.52 0 6.62-1.6 4.1-1.57 6.3-2.93 5.9-3.68 12.6-10.83 1.48-1.48 2-1.48.32 0 .32.63t-1.57 2.52Q309.65 59.9 302.8 64q-8.18 5.04-15.65 5.04-3.25 0-5.35-1.36-2-1.48-2-5.78 0-4.3 3.78-11.77 3.78-7.57 5.78-11.25-1.47.32-2.52.32-3.05 0-3.05-2.42 0-1.8 2.5-2.52.33 0 .96-.1h6.1q1.9-2.42 4.3-5.58 2.95-3.78 4-3.78 1.05 0 2.62.84 1.58.84 1.58 2 0 1.15-5.04 6.83 2.73.1 7.14.1z" style="-inkscape-font-specification:'Alex Brush'"/><path d="M355.27 25.54q1.57 0 2.94 1.05 1.48.93 1.48 2.3 0 1.36-1.37 2.42-1.25.94-2.82.94-1.58 0-2.95-1.15-1.26-1.15-1.26-2.62 0-2.94 4-2.94zm-19.03 44.03q-5.35 0-5.35-6.94 0-5.67 6.2-15.66 6.2-10.08 9.97-10.2 1.05 0 2.3.85 1.38.84 1.38 1.68-.53.74-1.26 1.68-.75.84-1.6 1.9-.83 1.05-2.3 3.04-1.47 1.9-2.84 3.68-7.88 10.2-7.88 14.08 0 3.8 2.63 3.8 2.2 0 6-2.43 8.82-5.47 13.97-11.98 1.9-2.42 2.52-2.42.73 0 .73.84 0 .83-2.42 3.36-2.4 2.52-3.88 4-1.36 1.46-1.9 2-.5.4-1.98 1.77-1.37 1.26-2.1 1.8-.74.5-2.1 1.56-1.37 1.05-2.42 1.57-1.05.42-2.42 1.05-2.2.95-5.26.95z" style="-inkscape-font-specification:'Alex Brush'"/><path d="M375.6 66.84q-3.04 1.78-7.56 1.78-4.4 0-6.83-2.94-2.3-2.94-3.98-9.35-1.9 1.9-2.63 1.9-.54 0-.54-.75 0-.73.53-1.26 3.46-4.3 11.76-12.4l13.24-12.4q5.67-5.36 6.73-5.36 3.36 0 3.36 2.52 0 1.26-1.06 2.53-.95 1.16-1.47 1.9-.42.63-.95 1.26-1.9 3.26-3.9 13.45-1.88 10.2-2.93 14.2 8.7-.1 17.96-11.35 1.05-1.05 1.58-1.05.52 0 .52.73 0 .63-.94 1.8-6.1 7.13-11.35 9.97-3.16 1.58-8.2 2.63l-3.36 2.2zm-14.18-11.67q0 3.57 2.3 5.9 2.43 2.2 5.37 2.2 2.93 0 4.5-1.16 2.1-1.15 4.1-9.66 2.1-8.5 2.53-15.03l.42-3.56q-5.78 4.3-12.4 11.14-6.52 6.83-6.73 9.03-.1.65-.1 1.17z" style="-inkscape-font-specification:'Alex Brush'"/><path d="M422.75 69.78q-1.15 0-2.1-.32-6.72-1.9-6.72-7.56 0-7.36 9.24-17.03 9.25-9.67 16.6-9.67 2.42 0 3.9 1.37 1.57 1.26 1.57 3.57 0 2.2-1.36 4.73-1.37 2.42-4.1 2.42-2.74 0-2.74-1.7 0-1.15 1.37-3.46 1.48-2.42 1.48-2.52 0-.2-.3-.2-2.96.3-8.1 4.2-5.05 3.88-6.94 6.5l-4.1 6q-1.05 1.68-1.58 4-.42 2.3-.42 3.46 0 1.15 1.27 2.62 1.37 1.48 3.8 1.48 5.24 0 13.02-6.1 7.78-6.2 11.98-11.77.52-.62 1.26-.62t.74.42q0 .42-.53 1.05-5.78 7.67-13.87 13.45-8 5.68-13.35 5.68z" style="-inkscape-font-specification:'Alex Brush'"/><path d="M471.95 46.13q0 3.68-7.04 12.3-8.3 10.2-14.17 10.2h-1.68q-2.74 0-4.3-2.85-1.27-2-1.27-4.4 0-6.3 9.14-17.66 9.25-11.46 14.92-11.46 5.36 0 5.36 5.68 0 1.47-.53 3.78.1.3 2 .3t5.78-1.98q-.1 1.78-8.3 5.15.1.4.1.93zm-6.83-5.46q-3.57 0-10.2 8.4-6.5 8.4-6.5 12.4t2.52 4q4.52 0 11.45-8.2t6.93-11.77q-1.68-.94-4.2-4.83z" style="-inkscape-font-specification:'Alex Brush'"/><path d="M501.5 46.13q0 3.68-7.03 12.3-8.3 10.2-14.2 10.2h-1.67q-2.73 0-4.3-2.85-1.27-2-1.27-4.4 0-6.3 9.14-17.66 9.25-11.46 14.93-11.46 5.36 0 5.36 5.68 0 1.47-.53 3.78.1.3 2 .3t5.78-1.98q-.1 1.78-8.3 5.15.1.4.1.93zm-6.82-5.46q-3.57 0-10.2 8.4-6.5 8.4-6.5 12.4t2.5 4q4.53 0 11.47-8.2 6.93-8.2 6.93-11.77-1.68-.94-4.2-4.83z" style="-inkscape-font-specification:'Alex Brush'"/><path d="M507.74 63.16q0 3.15 3.46 3.15 3.47 0 8.94-3.67 5.46-3.68 10.6-9.98 1.27-1.68 2-1.68.74 0 .74.63t-4.3 5.46q-10.5 11.56-17.56 11.56-3.46 0-5.88-1.57-2.42-1.7-2.42-5.05 0-3.47 1.8-8 3.04-7.13 9.76-17.96 12.3-19.96 17.45-19.96 1.05 0 2.1.84 1.15.73 1.26 1.68-2.43 3.26-9.36 12.5-6.83 9.25-9.46 13.35-2.63 4-4 6-1.26 2-1.9 3.14-.62 1.05-1.46 2.83-1.78 3.57-1.78 6.73z" style="-inkscape-font-specification:'Alex Brush'"/></g></svg>
&#13;
&#13;
&#13;

然而,vivus.js只能动画笔画,而不是填充。所以这就是我想要实现的目标:

我想制作2个版本的文字。首先,使用我的文字轮廓设计的面具,如下所示:

&#13;
&#13;
<svg xmlns="http://www.w3.org/2000/svg" width="151.184mm" height="25.387mm" viewBox="0 0 535.68974 89.954285"><g fill="none" stroke="#000" style="line-height:125%" font-size="105.087" font-family="Alex Brush" letter-spacing="0" word-spacing="0"><path d="M42.77 64.1q-2.52 3.9-2.52 5.05t.94 1.68q0 .1-1.9 1.57-1.68.85-3.78.85-2.1 0-3.05-.53-.94-.42-.63-1.47 1.47-4.73 11.04-18.92 9.56-14.3 12.82-20.17 7.04-12.72 7.04-20.3 0-3.14-1.05-5.34-2.12-4.3-10-4.3-12.3 0-25.43 10.6-10.5 8.5-16.08 18.08Q4.6 40.35 4.6 47.8q0 10.73 9.46 10.94.42 0 .84 0 12.1 0 18.7-8.72 2.53-3.47 2.53-5.88 0-2.42-1.05-3.05-.1-.12-.1-.43 0-.32.62-.32 2.74 0 2.74 3.58 0 2.2-2.2 6-2.1 3.77-7.58 7.13-5.46 3.36-12.7 3.36-7.26 0-11.57-4.5Q0 51.38 0 44q0-16.6 21.65-33.93 5.57-4.43 14.6-7.26Q45.4 0 53.7 0 62 0 64.94 2.94 68 5.78 68 10.6q0 7.37-6 19.88-1.9 3.88-8.5 14.18l8.08-10.3q5.9-7.67 20.4-21.85 3.14-3.04 6.92-5.04 3.9-2.1 6.62-2.1 3.8 0 3.8 4 0 3.46-3.38 10.5-3.25 6.94-6.62 13.24-3.36 6.2-4.1 8.2-.73 1.9-1.05 3.05-.3 1.15-.42 1.26.32-.52 6.94-7.98 6.6-7.57 19.54-18.8l16.8-13.88q2-1.68 3.58-1.68t2.52 2.62q1.06 2.63 1.06 4.3 0 1.6-5.05 6.74-13.13 13.45-22.28 29.42-9.14 15.98-9.14 22.8 0 1.8.63 2.42.63.74 2 .42 1.36-.2 5.67-2.1 4.42-1.9 5.78-2.2.54.2.54.52 0 1.58-5.57 4.4-5.47 2.85-8.3 2.85-2.74 0-3.37-.94-1.9-2.73-1.9-6.6 0-9.05 9.68-25.97 6.2-10.6 19.13-28.58-10.08 8.2-27.32 25.1-17.23 16.93-22.6 26.5-2.72 4.93-6.6 4.93-1.8 0-1.8-1.26 0-.42 2.1-3.78 2.2-3.36 9.57-15.76 18.07-31.43 18.07-37.84 0-1.68-1.15-1.68-1.7 0-4.94 2.84-11.67 9.77-24.8 25.54Q49.4 53.7 42.77 64.1z" style="-inkscape-font-specification:'Alex Brush'"/><path d="M111.9 80.6q5.03 6.3 8.7 6.3 6 0 12.94-9.56 5.04-7.04 9.87-17.76l4-9.66L131.97 62q-7.15 5.57-11.46 5.57-2.3 0-3.67-1.58t-1.37-3.58q0-4.52 7.78-14.82Q131 37.2 134.6 37.2q3.56 0 3.56 2.42 0 .94-9.35 10.93-9.24 9.87-9.24 13.34 0 1.36 1.8 1.36 3.35 0 13.44-7.88 10.2-7.88 15.34-13.03 1.16-1.37 3.26-4.1 2-2.3 4.4-2.3 2.43 0 2.43 2.3 0 .42-4.73 7.46-4.73 7.05-4.94 7.47-3.26 6.3-9.98 18.4-10.2 16.38-20.4 16.38-3.35 0-5.88-2.94-2.52-2.83-2.4-6.4z" style="-inkscape-font-specification:'Alex Brush'"/><path d="M204.72 34.57l15.13-.2q.32.2.32.3 0 .95-13.14 2.64-13.03 1.7-14.08 2-2 1.8-7.35 10.72-5.36 8.83-5.36 12.93 0 3.9 5.36 3.9 2.52 0 6.62-1.6 4.1-1.57 6.3-2.93 5.9-3.68 12.6-10.83 1.48-1.48 2-1.48.32 0 .32.63t-1.57 2.52Q206.4 59.9 199.57 64q-8.2 5.04-15.65 5.04-3.26 0-5.36-1.36-2-1.48-2-5.78 0-4.3 3.78-11.77 3.8-7.57 5.78-11.25-1.47.32-2.52.32-3.05 0-3.05-2.42 0-1.8 2.52-2.52.32 0 .95-.1h6.1q1.9-2.42 4.3-5.58 2.95-3.78 4-3.78 1.05 0 2.62.84 1.58.84 1.58 2 0 1.15-5.04 6.83 2.73.1 7.14.1z" style="-inkscape-font-specification:'Alex Brush'"/><path d="M213.85 69.78q-1.15 0-2.1-.32-6.73-1.9-6.73-7.56 0-7.36 9.25-17.03 9.25-9.67 16.6-9.67 2.42 0 3.9 1.37 1.57 1.26 1.57 3.15 0 5.9-8.93 11.25-8.82 5.36-14.4 5.36-.83 0-1.46-.2-1.58 2.82-1.58 5.98 0 5.47 5.15 5.47 5.27 0 13.57-7.04 6.4-5.15 10.93-10.93.94-1.26 1.57-1.26.74 0 .74.63t-.83 1.8Q235.4 58.2 227.4 64t-13.55 5.78zM233.7 39.5q0-1.25-2.72-1.25-2.63 0-7.57 4.1-6.6 5.46-10.28 11.45.63.2 1.36.2 4 0 10.62-4.2 6.72-4.3 8.4-9.34.2-.53.2-.95z" style="-inkscape-font-specification:'Alex Brush'"/><path d="M273.63 63.8q-7.57 6.3-12.6 6.3-4.95 0-6.53-7.26-.52-2.94-.74-8.83-12.82 13.68-19.23 24.7-.3.43-.84.43-1.27 0-1.27-1.16 0-.3.2-.52 9.8-15.45 21.13-27.1.43-14.4.53-16.2-2.43.53-10.3 12.2-3.9 5.88-6.84 9.03-2.94 3.15-3.47 3.68-.64.42-1.16.42-.63 0-.63-.53 0-.52 3.37-4.2 3.36-3.78 8.93-12.2 5.57-8.5 8-10.7 2.4-2.22 4.5-2.22t3.05.63q.95.53.64 2-.22 1.37-.43 2.42-.1 1.05-.22 2.42-.63 4.93-.73 8.1 5.15-4.95 23.22-20.3.2-.2.74-.2.52 0 1.37.94.84.84.84 1.8 0 .83-.85 1.67-3.37 2.74-11.77 8.84-8.3 6-13.77 11.03-.1 2.2-.1 6 0 3.77.95 6.93 1.26 4.1 4.62 4.1 6 0 18.5-14.4 1.05-1.05 1.58-1.05.52 0 .52.73 0 .63-.84 1.58-6.52 7.67-10.4 10.93z" style="-inkscape-font-specification:'Alex Brush'"/><path d="M307.96 34.57l15.13-.2q.3.2.3.3 0 .95-13.13 2.64-13.03 1.7-14.08 2-2 1.8-7.36 10.72-5.36 8.83-5.36 12.93 0 3.9 5.36 3.9 2.52 0 6.62-1.6 4.1-1.57 6.3-2.93 5.9-3.68 12.6-10.83 1.48-1.48 2-1.48.32 0 .32.63t-1.57 2.52Q309.65 59.9 302.8 64q-8.18 5.04-15.65 5.04-3.25 0-5.35-1.36-2-1.48-2-5.78 0-4.3 3.78-11.77 3.78-7.57 5.78-11.25-1.47.32-2.52.32-3.05 0-3.05-2.42 0-1.8 2.5-2.52.33 0 .96-.1h6.1q1.9-2.42 4.3-5.58 2.95-3.78 4-3.78 1.05 0 2.62.84 1.58.84 1.58 2 0 1.15-5.04 6.83 2.73.1 7.14.1z" style="-inkscape-font-specification:'Alex Brush'"/><path d="M355.27 25.54q1.57 0 2.94 1.05 1.48.93 1.48 2.3 0 1.36-1.37 2.42-1.25.94-2.82.94-1.58 0-2.95-1.15-1.26-1.15-1.26-2.62 0-2.94 4-2.94zm-19.03 44.03q-5.35 0-5.35-6.94 0-5.67 6.2-15.66 6.2-10.08 9.97-10.2 1.05 0 2.3.85 1.38.84 1.38 1.68-.53.74-1.26 1.68-.75.84-1.6 1.9-.83 1.05-2.3 3.04-1.47 1.9-2.84 3.68-7.88 10.2-7.88 14.08 0 3.8 2.63 3.8 2.2 0 6-2.43 8.82-5.47 13.97-11.98 1.9-2.42 2.52-2.42.73 0 .73.84 0 .83-2.42 3.36-2.4 2.52-3.88 4-1.36 1.46-1.9 2-.5.4-1.98 1.77-1.37 1.26-2.1 1.8-.74.5-2.1 1.56-1.37 1.05-2.42 1.57-1.05.42-2.42 1.05-2.2.95-5.26.95z" style="-inkscape-font-specification:'Alex Brush'"/><path d="M375.6 66.84q-3.04 1.78-7.56 1.78-4.4 0-6.83-2.94-2.3-2.94-3.98-9.35-1.9 1.9-2.63 1.9-.54 0-.54-.75 0-.73.53-1.26 3.46-4.3 11.76-12.4l13.24-12.4q5.67-5.36 6.73-5.36 3.36 0 3.36 2.52 0 1.26-1.06 2.53-.95 1.16-1.47 1.9-.42.63-.95 1.26-1.9 3.26-3.9 13.45-1.88 10.2-2.93 14.2 8.7-.1 17.96-11.35 1.05-1.05 1.58-1.05.52 0 .52.73 0 .63-.94 1.8-6.1 7.13-11.35 9.97-3.16 1.58-8.2 2.63l-3.36 2.2zm-14.18-11.67q0 3.57 2.3 5.9 2.43 2.2 5.37 2.2 2.93 0 4.5-1.16 2.1-1.15 4.1-9.66 2.1-8.5 2.53-15.03l.42-3.56q-5.78 4.3-12.4 11.14-6.5 6.83-6.73 9.03-.1.65-.1 1.17z" style="-inkscape-font-specification:'Alex Brush'"/><path d="M422.75 69.78q-1.15 0-2.1-.32-6.72-1.9-6.72-7.56 0-7.36 9.24-17.03 9.25-9.67 16.6-9.67 2.42 0 3.9 1.37 1.57 1.26 1.57 3.57 0 2.2-1.36 4.73-1.37 2.42-4.1 2.42-2.74 0-2.74-1.7 0-1.15 1.37-3.46 1.48-2.42 1.48-2.52 0-.2-.3-.2-2.96.3-8.1 4.2-5.05 3.88-6.94 6.5l-4.1 6q-1.05 1.68-1.58 4-.42 2.3-.42 3.46 0 1.15 1.27 2.62 1.37 1.48 3.8 1.48 5.24 0 13.02-6.1 7.78-6.2 11.98-11.77.52-.62 1.26-.62t.74.42q0 .42-.53 1.05-5.78 7.67-13.87 13.45-8 5.68-13.35 5.68z" style="-inkscape-font-specification:'Alex Brush'"/><path d="M471.95 46.13q0 3.68-7.04 12.3-8.3 10.2-14.17 10.2h-1.68q-2.74 0-4.3-2.85-1.27-2-1.27-4.4 0-6.3 9.14-17.66 9.25-11.46 14.92-11.46 5.36 0 5.36 5.68 0 1.47-.53 3.78.1.3 2 .3t5.78-1.98q-.1 1.78-8.3 5.15.1.4.1.93zm-6.83-5.46q-3.57 0-10.2 8.4-6.5 8.4-6.5 12.4t2.52 4q4.52 0 11.45-8.2t6.93-11.77q-1.68-.94-4.2-4.83z" style="-inkscape-font-specification:'Alex Brush'"/><path d="M501.5 46.13q0 3.68-7.03 12.3-8.3 10.2-14.2 10.2h-1.67q-2.73 0-4.3-2.85-1.27-2-1.27-4.4 0-6.3 9.14-17.66 9.25-11.46 14.93-11.46 5.36 0 5.36 5.68 0 1.47-.53 3.78.1.3 2 .3t5.78-1.98q-.1 1.78-8.3 5.15.1.4.1.93zm-6.82-5.46q-3.57 0-10.2 8.4-6.5 8.4-6.5 12.4t2.5 4q4.53 0 11.47-8.2 6.93-8.2 6.93-11.77-1.68-.94-4.2-4.83z" style="-inkscape-font-specification:'Alex Brush'"/><path d="M507.74 63.16q0 3.15 3.46 3.15 3.47 0 8.94-3.67 5.46-3.68 10.6-9.98 1.27-1.68 2-1.68.74 0 .74.63t-4.3 5.46q-10.5 11.56-17.56 11.56-3.46 0-5.88-1.57-2.42-1.7-2.42-5.05 0-3.47 1.8-8 3.04-7.13 9.76-17.96 12.3-19.96 17.45-19.96 1.05 0 2.1.84 1.15.73 1.26 1.68-2.43 3.26-9.36 12.5-6.83 9.25-9.46 13.35-2.63 4-4 6-1.26 2-1.9 3.14-.62 1.05-1.46 2.83-1.78 3.57-1.78 6.73z" style="-inkscape-font-specification:'Alex Brush'"/></g></svg>
&#13;
&#13;
&#13;

其次,带有中心线的另一个版本的文本。虽然我可以使用像this one这样的工具来实现这一目标,但我认为如果我这样做的话会更加清洁&#34;手工和#34;。最重要的是,我将使用单个路径/笔划对上面列出的文本进行或多或少的准确版本。

第三,我会增加中心线模型的stroke-width

最后,我会在单行文字上使用vivus.js,但隐藏大纲掩码/图层之外的内容。

我被困在这部分上面(以粗体显示)。到目前为止,我有2个潜在客户:svg maskclipPath

然而,由于没有尝试过这种SVG操作,我想知道在跨浏览器兼容性方面是否是一个好主意,并且是否建议使用特定方法(性能方面也是如此)。

0 个答案:

没有答案