我想让公司徽标的动画看起来像正在写的一样。我有原始SVG与徽标路径，并创建了单独的路径，将作为将动画的蒙版。
由于某些原因，面具没有覆盖原始徽标，而如果您显示面具路径，则应覆盖徽标。
任何人都可以帮助我吗？
到目前为止，我的代码位于CodePen上：http://codepen.io/MRSYDSTER/pen/XpWwdB
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Grip Dashing</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
<style>
</style>
</head>
<body>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve">
<path id="r" clip-path="url(#myClip)" fill="#44A647" d="M7.066,8.727L7.001,8.29H6.476v2.617H7.13V9.301c0.251-0.308,0.397-0.453,0.564-0.453
c0.076,0,0.22,0.02,0.276,0.04L8.045,8.27C7.955,8.244,7.869,8.232,7.743,8.232C7.474,8.232,7.313,8.385,7.066,8.727z"/>
<polygon id="i" clip-path="url(#myClip)" fill="#44A647" points="8.539,8.794 8.941,8.794 8.941,10.907 9.596,10.907 9.596,8.29 8.539,8.29 "/>
<path id="gp" clip-path="url(#myClip)" fill="#44A647" d="M11.56,5.534c-0.37,0-0.748,0.061-1.13,0.181c-0.384-1.318-1.596-2.245-2.996-2.245
c-1.403,0-2.629,0.94-3.004,2.271C4.34,5.735,4.251,5.731,4.161,5.731c-1.896,0-3.438,1.542-3.438,3.438
c0,0.865,0.322,1.692,0.909,2.329c0.448,0.484,0.941,0.808,1.531,0.966c0.093,0.025,0.337,0.078,0.579,0.113
c0.221,0.032,0.439,0.046,0.525,0.052c0.094,0.005,0.185,0.008,0.269,0.008c0.89,0,1.337-0.354,1.337-1.181V8.418
C5.42,8.292,5.107,8.246,4.786,8.246c-0.965,0-1.415,0.611-1.415,1.42c0,0.691,0.327,1.252,1.073,1.252
c0.302,0,0.522-0.106,0.774-0.318v0.947c0,0.45-0.213,0.576-0.707,0.576c-0.253,0-0.531-0.015-0.764-0.044
c-1.194-0.121-2.472-1.426-2.472-2.908c0-1.591,1.293-2.885,2.885-2.885c0.571,0,1.125,0.167,1.598,0.483
c0.126,0.085,0.298,0.051,0.383-0.076c0.084-0.128,0.051-0.299-0.077-0.385c-0.333-0.222-0.7-0.382-1.084-0.475
c0.327-1.062,1.319-1.807,2.452-1.807c1.169,0,2.18,0.786,2.478,1.896C9.46,6.162,9.149,6.55,8.996,6.933
c-0.062,0.153-0.13,0.525-0.133,0.568C8.862,7.512,8.862,7.523,8.862,7.534c0,0.233,0.167,0.389,0.399,0.389
c0.233,0,0.398-0.156,0.398-0.389c0-0.148-0.067-0.264-0.174-0.329c0.109-0.331,0.414-0.701,0.847-0.871
c0.002,0,0.003-0.001,0.004-0.002c0.418-0.163,0.829-0.246,1.224-0.246c1.744,0,3.164,1.419,3.164,3.164
c0,1.605-1.009,2.95-2.6,3.136c-0.232,0.029-0.507,0.046-0.759,0.046c-0.496,0-0.711-0.126-0.711-0.577V11.57v-0.637
c0.151,0.03,0.333,0.056,0.509,0.056c0.919,0,1.344-0.648,1.344-1.455c0-0.703-0.325-1.263-1.058-1.263
c-0.383,0-0.64,0.152-0.882,0.409l-0.051-0.34H9.999v3.23v0.196c0,0.828,0.45,1.181,1.338,1.181c0.248,0,0.556-0.025,0.809-0.076
c1.87-0.219,3.131-1.734,3.131-3.62C15.277,7.202,13.609,5.534,11.56,5.534z M4.582,10.393c-0.404,0-0.524-0.353-0.524-0.793
c0-0.529,0.24-0.847,0.68-0.847c0.181,0,0.33,0.04,0.481,0.1v1.197C5.017,10.276,4.82,10.393,4.582,10.393z M10.653,9.18
c0.25-0.262,0.423-0.383,0.655-0.383c0.379,0,0.505,0.353,0.505,0.813c0,0.555-0.222,0.864-0.661,0.864
c-0.207,0-0.348-0.051-0.499-0.111V9.18z"/>
<defs>
<clipPath id="myClip">
<path fill="none" stroke="#000000" stroke-width="0.85" stroke-miterlimit="10" d="M10.5,8.9c0.6-0.2,1.7-0.8,1.7,0.8
c0,0.8-0.6,0.9-1.6,1"/>
<path fill="none" stroke="#000000" stroke-width="0.85" stroke-miterlimit="10" d="M9.4,8c-0.6-1.5,1.1-2.2,2.1-2.2
c2.4,0.1,3.2,1.6,3.5,3.3c0.4,2.7-3.3,4.1-4.2,3.5c-0.3-0.2-0.5-0.7-0.6-1.7c0-1.2,0.2-1.1-0.1-2.7"/>
<path fill="none" stroke="#000000" stroke-width="0.85" stroke-miterlimit="10" d="M8.5,8.5c0.5,0,0.7,0.1,0.8,0.1
s-0.1,1.3,0,2.4"/>
<path fill="none" stroke="#000000" stroke-miterlimit="10" d="M6.9,9.1c0.4-0.2,0.9-0.5,1.3-0.7"/>
<path fill="none" stroke="#000000" stroke-miterlimit="10" d="M6.8,11c-0.1-0.9-0.2-1.9-0.3-2.8"/>
<path fill="none" stroke="#000000" stroke-miterlimit="10" d="M4.7,5.8c0.2-1.3,1.5-2.1,2.8-2.1s2.2,0.9,2.7,2.1"/>
<path fill="none" stroke="#000000" stroke-miterlimit="10" d="M5.2,10.3c-0.5,0-0.8,0.4-1.1,0.1c-0.4-0.3-0.4-1-0.2-1.4
c0.4-0.7,1.4-0.7,1.7-0.4c0.1,0.1,0,0.3,0,0.3c0,1.3,0,2.6,0,2.7c-0.3,0.8-1.8,0.7-2.7,0.4c-1.3-0.5-2.2-2.2-1.8-3.8
c0.4-1.5,2-2.2,3.3-2.1c1.1,0.1,1.5,0.4,1.7,0.7"/>
</clipPath>
</defs>
</svg>
<script>
var paths = $(‘path:not(defs path)’);
paths.each(function(i, e) {
e.style.strokeDasharray = e.style.strokeDashoffset = e.getTotalLength();
});
var tl = new TimelineMax();
tl.add([
TweenLite.to(paths.eq(0), 1, {strokeDashoffset: 0, delay: 0.0}),
TweenLite.to(paths.eq(1), 1, {strokeDashoffset: 0, delay: 0.5}),
]);
</script>
</body>
</html>
答案 0 :(得分：0)
我从SVG中提取了剪辑路径，结果是：
<svg viewBox="0 0 16 16" width="200" height="200">
<g fill="#000" fill-opacity="0.2" stroke="#000" stroke-width="0.05">
<path d="M10.5,8.9c0.6-0.2,1.7-0.8,1.7,0.8c0,0.8-0.6,0.9-1.6,1" />
<path d="M9.4,8c-0.6-1.5,1.1-2.2,2.1-2.2c2.4,0.1,3.2,1.6,3.5,3.3
c0.4,2.7-3.3,4.1-4.2,3.5c-0.3-0.2-0.5-0.7-0.6-1.7c0-1.2,0.2-1.1
-0.1-2.7" />
<path d="M8.5,8.5c0.5,0,0.7,0.1,0.8,0.1s-0.1,1.3,0,2.4" />
<path d="M6.9,9.1c0.4-0.2,0.9-0.5,1.3-0.7" />
<path d="M6.8,11c-0.1-0.9-0.2-1.9-0.3-2.8" />
<path d="M4.7,5.8c0.2-1.3,1.5-2.1,2.8-2.1s2.2,0.9,2.7,2.1" />
<path d="M5.2,10.3c-0.5,0-0.8,0.4-1.1,0.1c-0.4-0.3-0.4-1-0.2-1.4
c0.4-0.7,1.4-0.7,1.7-0.4c0.1,0.1,0,0.3,0,0.3c0,1.3,0,2.6,0,
2.7c-0.3,0.8-1.8,0.7-2.7,0.4c-1.3-0.5-2.2-2.2-1.8-3.8c0.4-1.5,
2-2.2,3.3-2.1c1.1,0.1,1.5,0.4,1.7,0.7" />
</g>
</svg>
看起来您希望此剪切路径的笔划部分包含在蒙版区域中。我担心裁剪路径不起作用。 As per the SVG specification，
除了'clipPath'中的'fill'，'stroke'，'stroke-width'之类的渲染属性之外，每个子元素的原始几何形状在概念上定义了一个1位掩码（可能的例外情况除外）沿着几何体的边缘的抗锯齿），其表示与该元素相关联的图形的轮廓。对象轮廓之外的任何东西都被掩盖了。
基本上，剪切路径中的stroke-width属性根本没有效果。如果您希望它们做任何有用的事情，您必须将它们扩展到填充区域。
或者，将徽标转换为一组没有填充的描边路径。这会稍微改变它的外观，但会让你更接近你想要达到的效果。