SVG 动画文本填充颜色问题
SVG Animation Text Fill Color Issue
我已经按照自己的意愿制作了动画。但现在我遇到的问题是如何在动画绘制文字时用黑色填充它们。
我希望你明白我在说什么。
现在它显示的是这样的
http://progsofts.com/animate.html
但是我想要它动画时，它应该用黑色填充文本字母。
如果有人可以帮助我，这是我的代码。
<style>
#animator { //ADJUST NAME TO MATCH YOUR ID
position: relative;
width: 360px; //ADJUST WIDTH TO MATCH WIDTH OF YOUR TEXT
height: 110px; //ADJUST HEIGHT TO MATCH HEIGHT OF YOUR TEXT
margin: 40vh auto 0 auto;
}
#svg-canvas { //ADJUST NAME TO MATCH YOUR ID
position: relative;
width: 360px; //ADJUST WIDTH TO MATCH WIDTH OF YOUR TEXT
height: 110px; //ADJUST HEIGHT TO MATCH HEIGHT OF YOUR TEXT
}
.title {
stroke-dasharray: 500;
stroke-dashoffset: 500;
background:black;
animation: draw 3s linear forwards;
-webkit-animation: draw 3s linear forwards;
-moz-animation: draw 3s linear forwards;
-o-animation: draw 3s linear forwards;
font-weight: bold;
font-size:50px;
font-family: Amatic SC;
-inkscape-font-specification: Amatic SC Bold"
}
@keyframes draw {
to {
stroke-dashoffset: 0;
}
}
@-webkit-keyframes draw {
to {
stroke-dashoffset: 0;
}
}
@-moz-keyframes draw {
to {
stroke-dashoffset: 0;
}
}
@-o-keyframes draw {
to {
stroke-dashoffset: 0;
}
}
</style>
<div id="animator">
<svg id="svg-canvas">
<g
style="font-style:normal;font-weight:normal;font-size:50px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000;fill-opacity:0.5;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:0.5"
id="text4151">
<path class="title" fill-opacity="0" stroke="#000" stroke-miterlimit="10" stroke-width="1.5"
d="m 54.411272,49.131176 q 0,2.167969 -0.820312,3.828125 -0.820313,1.660156 -2.207032,2.734375 -1.640625,1.289062 -3.613281,1.835937 -1.953125,0.546875 -4.980469,0.546875 l -10.3125,0 0,-29.082031 8.613282,0 q 3.183593,0 4.765625,0.234375 1.582031,0.234375 3.027343,0.976563 1.601563,0.839843 2.324219,2.167968 0.722656,1.308594 0.722656,3.144532 0,2.070312 -1.054687,3.535156 -1.054688,1.445312 -2.8125,2.324219 l 0,0.15625 q 2.949219,0.605468 4.648437,2.597656 1.699219,1.972656 1.699219,5 z M 47.907366,36.025707 q 0,-1.054687 -0.351563,-1.777344 -0.351562,-0.722656 -1.132812,-1.171875 -0.917969,-0.527343 -2.226563,-0.644531 -1.308593,-0.136719 -3.242187,-0.136719 l -4.609375,0 0,8.398438 5,0 q 1.816406,0 2.890625,-0.175781 1.074219,-0.195313 1.992187,-0.78125 0.917969,-0.585938 1.289063,-1.503907 0.390625,-0.9375 0.390625,-2.207031 z m 2.480469,13.261719 q 0,-1.757813 -0.527344,-2.792969 -0.527344,-1.035156 -1.914063,-1.757812 -0.9375,-0.488282 -2.285156,-0.625 -1.328125,-0.15625 -3.242187,-0.15625 l -6.074219,0 0,10.820312 5.117187,0 q 2.539063,0 4.160157,-0.253906 1.621093,-0.273438 2.65625,-0.976563 1.09375,-0.761718 1.601562,-1.738281 0.507813,-0.976562 0.507813,-2.519531 z"
style=""
id="path4156" />
<path class="title" fill-opacity="0" stroke="#000" stroke-width="1.5"
d="m 76.55971,58.076488 -3.652344,0 0,-2.324218 q -0.488281,0.332031 -1.328125,0.9375 -0.820313,0.585937 -1.601563,0.9375 -0.917968,0.449218 -2.109375,0.742187 -1.191406,0.3125 -2.792968,0.3125 -2.949219,0 -5,-1.953125 -2.050782,-1.953125 -2.050782,-4.980469 0,-2.480468 1.054688,-4.003906 1.074219,-1.542969 3.046875,-2.421875 1.992187,-0.878906 4.785156,-1.191406 2.792969,-0.3125 5.996094,-0.46875 l 0,-0.566406 q 0,-1.25 -0.449219,-2.070313 -0.429687,-0.820312 -1.25,-1.289062 -0.78125,-0.449219 -1.875,-0.605469 -1.09375,-0.15625 -2.285156,-0.15625 -1.445313,0 -3.222656,0.390625 -1.777344,0.371094 -3.671875,1.09375 l -0.195313,0 0,-3.730469 q 1.074219,-0.292969 3.105469,-0.644531 2.03125,-0.351563 4.003906,-0.351563 2.304688,0 4.003906,0.390625 1.71875,0.371094 2.96875,1.289063 1.230469,0.898437 1.875,2.324219 0.644532,1.425781 0.644532,3.535156 l 0,14.804687 z m -3.652344,-5.371093 0,-6.074219 q -1.679688,0.09766 -3.964844,0.292969 -2.265625,0.195312 -3.59375,0.566406 -1.582031,0.449219 -2.558594,1.40625 -0.976562,0.9375 -0.976562,2.597656 0,1.875 1.132812,2.832031 1.132813,0.9375 3.457032,0.9375 1.933593,0 3.535156,-0.742187 1.601562,-0.761719 2.96875,-1.816406 z"
style=""
id="path4158" />
<path class="title" fill-opacity="0" stroke="#000" stroke-width="1.5"
d="m 102.8683,47.00227 q 0,2.734375 -0.78125,4.921875 -0.76172,2.1875 -2.07031,3.671875 -1.386718,1.542968 -3.046874,2.324218 -1.660156,0.761719 -3.652344,0.761719 -1.855469,0 -3.242187,-0.449219 -1.386719,-0.429687 -2.734375,-1.171875 l -0.234375,1.015625 -3.4375,0 0,-30.390625 3.671875,0 0,10.859375 q 1.542968,-1.269531 3.28125,-2.070312 1.738281,-0.820313 3.90625,-0.820313 3.867187,0 6.09375,2.96875 2.24609,2.96875 2.24609,8.378907 z m -3.789059,0.09766 q 0,-3.90625 -1.289063,-5.917969 -1.289062,-2.03125 -4.160156,-2.03125 -1.601562,0 -3.242187,0.703125 -1.640625,0.683594 -3.046875,1.777344 l 0,12.5 q 1.5625,0.703125 2.675781,0.976562 1.132812,0.273438 2.558594,0.273438 3.046875,0 4.765625,-1.992188 1.738281,-2.011718 1.738281,-6.289062 z"
style=""
id="path4160" />
<path class="title" fill-opacity="0" stroke="#000" stroke-width="1.5"
d="m 126.85268,47.549145 -16.07422,0 q 0,2.011718 0.60547,3.515625 0.60547,1.484375 1.66015,2.441406 1.01563,0.9375 2.40235,1.40625 1.40625,0.46875 3.08594,0.46875 2.22656,0 4.47265,-0.878906 2.26563,-0.898438 3.22266,-1.757813 l 0.19531,0 0,4.003906 q -1.85547,0.78125 -3.78906,1.308594 -1.9336,0.527344 -4.0625,0.527344 -5.42969,0 -8.47656,-2.929688 -3.04688,-2.949218 -3.04688,-8.359375 0,-5.351562 2.91016,-8.496093 2.92968,-3.144532 7.69531,-3.144532 4.41406,0 6.79687,2.578125 2.40235,2.578125 2.40235,7.324219 l 0,1.992188 z m -3.57422,-2.8125 q -0.0195,-2.890625 -1.46484,-4.472657 -1.42579,-1.582031 -4.35547,-1.582031 -2.94922,0 -4.70703,1.738281 -1.73829,1.738282 -1.97266,4.316407 l 12.5,0 z"
style=""
id="path4162" />
<path class="title" fill-opacity="0" stroke="#000" stroke-width="1.5"
d="m 146.03237,40.263988 -0.19532,0 q -0.82031,-0.195312 -1.60156,-0.273437 -0.76172,-0.09766 -1.81641,-0.09766 -1.69921,0 -3.28125,0.761718 -1.58203,0.742188 -3.04687,1.933594 l 0,15.488281 -3.67188,0 0,-21.816406 3.67188,0 0,3.222656 q 2.1875,-1.757812 3.84766,-2.480468 1.67968,-0.742188 3.41796,-0.742188 0.95704,0 1.38672,0.05859 0.42969,0.03906 1.28907,0.175781 l 0,3.769531 z"
style=""
id="path4164" />
<path class="title" fill-opacity="0" stroke="#000" stroke-width="1.5"
d="m 185.13393,58.076488 -22.69531,0 0,-3.59375 17.83203,-22.050781 -17.16797,0 0,-3.4375 21.60156,0 0,3.496094 -18.00781,22.148437 18.4375,0 0,3.4375 z"
style=""
id="path4166" />
<path class="title" fill-opacity="0" stroke="#000" stroke-width="1.5"
d="m 207.02846,58.076488 -3.65234,0 0,-2.324218 q -0.48829,0.332031 -1.32813,0.9375 -0.82031,0.585937 -1.60156,0.9375 -0.91797,0.449218 -2.10938,0.742187 -1.1914,0.3125 -2.79297,0.3125 -2.94921,0 -5,-1.953125 -2.05078,-1.953125 -2.05078,-4.980469 0,-2.480468 1.05469,-4.003906 1.07422,-1.542969 3.04688,-2.421875 1.99218,-0.878906 4.78515,-1.191406 2.79297,-0.3125 5.9961,-0.46875 l 0,-0.566406 q 0,-1.25 -0.44922,-2.070313 -0.42969,-0.820312 -1.25,-1.289062 -0.78125,-0.449219 -1.875,-0.605469 -1.09375,-0.15625 -2.28516,-0.15625 -1.44531,0 -3.22266,0.390625 -1.77734,0.371094 -3.67187,1.09375 l -0.19531,0 0,-3.730469 q 1.07422,-0.292969 3.10547,-0.644531 2.03125,-0.351563 4.0039,-0.351563 2.30469,0 4.00391,0.390625 1.71875,0.371094 2.96875,1.289063 1.23047,0.898437 1.875,2.324219 0.64453,1.425781 0.64453,3.535156 l 0,14.804687 z m -3.65234,-5.371093 0,-6.074219 q -1.67969,0.09766 -3.96485,0.292969 -2.26562,0.195312 -3.59375,0.566406 -1.58203,0.449219 -2.55859,1.40625 -0.97656,0.9375 -0.97656,2.597656 0,1.875 1.13281,2.832031 1.13281,0.9375 3.45703,0.9375 1.93359,0 3.53516,-0.742187 1.60156,-0.761719 2.96875,-1.816406 z"
style=""
id="path4168" />
<path class="title" fill-opacity="0" stroke="#000" stroke-width="1.5"
d="m 245.97377,58.076488 -3.67187,0 0,-12.421875 q 0,-1.40625 -0.13672,-2.714843 -0.11719,-1.308594 -0.52735,-2.089844 -0.44921,-0.839844 -1.28906,-1.269531 -0.83984,-0.429688 -2.42187,-0.429688 -1.54297,0 -3.08594,0.78125 -1.54297,0.761719 -3.08594,1.953125 0.0586,0.449219 0.0977,1.054688 0.0391,0.585937 0.0391,1.171875 l 0,13.964843 -3.67187,0 0,-12.421875 q 0,-1.445312 -0.13672,-2.734375 -0.11719,-1.308593 -0.52735,-2.089843 -0.44922,-0.839844 -1.28906,-1.25 -0.83984,-0.429688 -2.42187,-0.429688 -1.50391,0 -3.02735,0.742188 -1.5039,0.742187 -3.00781,1.894531 l 0,16.289062 -3.67188,0 0,-21.816406 3.67188,0 0,2.421875 q 1.71875,-1.425781 3.41797,-2.226562 1.71875,-0.800782 3.65234,-0.800782 2.22656,0 3.76953,0.9375 1.5625,0.9375 2.32422,2.597657 2.22656,-1.875 4.0625,-2.695313 1.83594,-0.839844 3.92578,-0.839844 3.59375,0 5.29297,2.1875 1.71875,2.167969 1.71875,6.074219 l 0,14.160156 z"
style=""
id="path4170" />
<path class="title" fill-opacity="0" stroke="#000" stroke-width="1.5"
d="m 269.99721,58.076488 -3.65234,0 0,-2.324218 q -0.48829,0.332031 -1.32813,0.9375 -0.82031,0.585937 -1.60156,0.9375 -0.91797,0.449218 -2.10938,0.742187 -1.1914,0.3125 -2.79297,0.3125 -2.94921,0 -5,-1.953125 -2.05078,-1.953125 -2.05078,-4.980469 0,-2.480468 1.05469,-4.003906 1.07422,-1.542969 3.04688,-2.421875 1.99218,-0.878906 4.78515,-1.191406 2.79297,-0.3125 5.9961,-0.46875 l 0,-0.566406 q 0,-1.25 -0.44922,-2.070313 -0.42969,-0.820312 -1.25,-1.289062 -0.78125,-0.449219 -1.875,-0.605469 -1.09375,-0.15625 -2.28516,-0.15625 -1.44531,0 -3.22266,0.390625 -1.77734,0.371094 -3.67187,1.09375 l -0.19531,0 0,-3.730469 q 1.07422,-0.292969 3.10547,-0.644531 2.03125,-0.351563 4.0039,-0.351563 2.30469,0 4.00391,0.390625 1.71875,0.371094 2.96875,1.289063 1.23047,0.898437 1.875,2.324219 0.64453,1.425781 0.64453,3.535156 l 0,14.804687 z m -3.65234,-5.371093 0,-6.074219 q -1.67969,0.09766 -3.96485,0.292969 -2.26562,0.195312 -3.59375,0.566406 -1.58203,0.449219 -2.55859,1.40625 -0.97656,0.9375 -0.97656,2.597656 0,1.875 1.13281,2.832031 1.13281,0.9375 3.45703,0.9375 1.93359,0 3.53516,-0.742187 1.60156,-0.761719 2.96875,-1.816406 z"
style=""
id="path4172" />
<path class="title" fill-opacity="0" stroke="#000" stroke-width="1.5"
d="m 295.34877,58.076488 -3.67187,0 0,-12.421875 q 0,-1.503906 -0.17578,-2.8125 -0.17579,-1.328125 -0.64454,-2.070312 -0.48828,-0.820313 -1.40625,-1.210938 -0.91796,-0.410156 -2.38281,-0.410156 -1.5039,0 -3.14453,0.742188 -1.64062,0.742187 -3.14453,1.894531 l 0,16.289062 -3.67188,0 0,-21.816406 3.67188,0 0,2.421875 q 1.71875,-1.425781 3.55469,-2.226562 1.83593,-0.800782 3.76953,-0.800782 3.53515,0 5.39062,2.128907 1.85547,2.128906 1.85547,6.132812 l 0,14.160156 z"
style=""
id="path4174" />
</g>
</g>
</svg>
</div>
希望尽快得到帮助。
谢谢
您只需为填充不透明度设置动画。将此添加到关键帧样式：
fill-opacity:1.0;
#animator { position:relative; width:320px; height:90px; margin:40vh auto 0 auto; }
#svg-canvas { position:relative; width:320px; height:90px; }
.title path { stroke-dasharray:500; stroke-dashoffset:500; animation:draw 3s linear forwards; -webkit-animation:draw 3s linear forwards; -moz-animation:draw 3s linear forwards; -o-animation:draw 3s linear forwards; }
@keyframes draw { to { stroke-dashoffset:0; fill-opacity:1.0; } }
@-webkit-keyframes draw { to { stroke-dashoffset:0; fill-opacity:1.0; } }
@-moz-keyframes draw { to { stroke-dashoffset:0; fill-opacity:1.0; } }
@-o-keyframes draw { to { stroke-dashoffset:0; fill-opacity:1.0; } }
<div id="animator">
<svg id="svg-canvas" width="320" height="90" viewBox="0 0 320 90">
<g fill="#000" stroke="#000" fill-opacity="0" stroke-width="1.5" stroke-opacity="0.5" class="title">
<path d="m 54.41,49.13 q 0,2.17 -0.82,3.83 -0.82,1.66 -2.21,2.73 -1.64,1.29 -3.61,1.84 -1.95,0.55 -4.98,0.55 l -10.31,0 0,-29.08 8.61,0 q 3.18,0 4.77,0.23 1.58,0.23 3.03,0.98 1.60,0.84 2.32,2.17 0.72,1.31 0.72,3.14 0,2.07 -1.05,3.54 -1.05,1.45 -2.81,2.32 l 0,0.16 q 2.95,0.61 4.65,2.60 1.70,1.97 1.70,5 z M 47.91,36.03 q 0,-1.05 -0.35,-1.78 -0.35,-0.72 -1.13,-1.17 -0.92,-0.53 -2.23,-0.64 -1.31,-0.14 -3.24,-0.14 l -4.61,0 0,8.40 5,0 q 1.82,0 2.89,-0.18 1.07,-0.20 1.99,-0.78 0.92,-0.59 1.29,-1.50 0.39,-0.94 0.39,-2.21 z m 2.48,13.26 q 0,-1.76 -0.53,-2.79 -0.53,-1.04 -1.91,-1.76 -0.94,-0.49 -2.29,-0.62 -1.33,-0.16 -3.24,-0.16 l -6.07,0 0,10.82 5.12,0 q 2.54,0 4.16,-0.25 1.62,-0.27 2.66,-0.98 1.09,-0.76 1.60,-1.74 0.51,-0.98 0.51,-2.52 z" />
<path d="m 76.56,58.08 -3.65,0 0,-2.32 q -0.49,0.33 -1.33,0.94 -0.82,0.59 -1.60,0.94 -0.92,0.45 -2.11,0.74 -1.19,0.31 -2.79,0.31 -2.95,0 -5,-1.95 -2.05,-1.95 -2.05,-4.98 0,-2.48 1.05,-4.00 1.07,-1.54 3.05,-2.42 1.99,-0.88 4.79,-1.19 2.79,-0.31 6.00,-0.47 l 0,-0.57 q 0,-1.25 -0.45,-2.07 -0.43,-0.82 -1.25,-1.29 -0.78,-0.45 -1.88,-0.61 -1.09,-0.16 -2.29,-0.16 -1.45,0 -3.22,0.39 -1.78,0.37 -3.67,1.09 l -0.20,0 0,-3.73 q 1.07,-0.29 3.11,-0.64 2.03,-0.35 4.00,-0.35 2.30,0 4.00,0.39 1.72,0.37 2.97,1.29 1.23,0.90 1.88,2.32 0.64,1.43 0.64,3.54 l 0,14.80 z m -3.65,-5.37 0,-6.07 q -1.68,0.10 -3.96,0.29 -2.27,0.20 -3.59,0.57 -1.58,0.45 -2.56,1.41 -0.98,0.94 -0.98,2.60 0,1.88 1.13,2.83 1.13,0.94 3.46,0.94 1.93,0 3.54,-0.74 1.60,-0.76 2.97,-1.82 z" />
<path d="m 102.87,47.00 q 0,2.73 -0.78,4.92 -0.76,2.19 -2.07,3.67 -1.39,1.54 -3.05,2.32 -1.66,0.76 -3.65,0.76 -1.86,0 -3.24,-0.45 -1.39,-0.43 -2.73,-1.17 l -0.23,1.02 -3.44,0 0,-30.39 3.67,0 0,10.86 q 1.54,-1.27 3.28,-2.07 1.74,-0.82 3.91,-0.82 3.87,0 6.09,2.97 2.25,2.97 2.25,8.38 z m -3.79,0.10 q 0,-3.91 -1.29,-5.92 -1.29,-2.03 -4.16,-2.03 -1.60,0 -3.24,0.70 -1.64,0.68 -3.05,1.78 l 0,12.50 q 1.56,0.70 2.68,0.98 1.13,0.27 2.56,0.27 3.05,0 4.77,-1.99 1.74,-2.01 1.74,-6.29 z" />
<path d="m 126.85,47.55 -16.07,0 q 0,2.01 0.61,3.52 0.61,1.48 1.66,2.44 1.02,0.94 2.40,1.41 1.41,0.47 3.09,0.47 2.23,0 4.47,-0.88 2.27,-0.90 3.22,-1.76 l 0.20,0 0,4.00 q -1.86,0.78 -3.79,1.31 -1.93,0.53 -4.06,0.53 -5.43,0 -8.48,-2.93 -3.05,-2.95 -3.05,-8.36 0,-5.35 2.91,-8.50 2.93,-3.14 7.70,-3.14 4.41,0 6.80,2.58 2.40,2.58 2.40,7.32 l 0,1.99 z m -3.57,-2.81 q -0.02,-2.89 -1.46,-4.47 -1.43,-1.58 -4.36,-1.58 -2.95,0 -4.71,1.74 -1.74,1.74 -1.97,4.32 l 12.50,0 z" />
<path d="m 146.03,40.26 -0.20,0 q -0.82,-0.20 -1.60,-0.27 -0.76,-0.10 -1.82,-0.10 -1.70,0 -3.28,0.76 -1.58,0.74 -3.05,1.93 l 0,15.49 -3.67,0 0,-21.82 3.67,0 0,3.22 q 2.19,-1.76 3.85,-2.48 1.68,-0.74 3.42,-0.74 0.96,0 1.39,0.06 0.43,0.04 1.29,0.18 l 0,3.77 z" />
<path d="m 185.13,58.08 -22.70,0 0,-3.59 17.83,-22.05 -17.17,0 0,-3.44 21.60,0 0,3.50 -18.01,22.15 18.44,0 0,3.44 z" />
<path d="m 207.03,58.08 -3.65,0 0,-2.32 q -0.49,0.33 -1.33,0.94 -0.82,0.59 -1.60,0.94 -0.92,0.45 -2.11,0.74 -1.19,0.31 -2.79,0.31 -2.95,0 -5,-1.95 -2.05,-1.95 -2.05,-4.98 0,-2.48 1.05,-4.00 1.07,-1.54 3.05,-2.42 1.99,-0.88 4.79,-1.19 2.79,-0.31 6.00,-0.47 l 0,-0.57 q 0,-1.25 -0.45,-2.07 -0.43,-0.82 -1.25,-1.29 -0.78,-0.45 -1.88,-0.61 -1.09,-0.16 -2.29,-0.16 -1.45,0 -3.22,0.39 -1.78,0.37 -3.67,1.09 l -0.20,0 0,-3.73 q 1.07,-0.29 3.11,-0.64 2.03,-0.35 4.00,-0.35 2.30,0 4.00,0.39 1.72,0.37 2.97,1.29 1.23,0.90 1.88,2.32 0.64,1.43 0.64,3.54 l 0,14.80 z m -3.65,-5.37 0,-6.07 q -1.68,0.10 -3.96,0.29 -2.27,0.20 -3.59,0.57 -1.58,0.45 -2.56,1.41 -0.98,0.94 -0.98,2.60 0,1.88 1.13,2.83 1.13,0.94 3.46,0.94 1.93,0 3.54,-0.74 1.60,-0.76 2.97,-1.82 z" />
<path d="m 245.97,58.08 -3.67,0 0,-12.42 q 0,-1.41 -0.14,-2.71 -0.12,-1.31 -0.53,-2.09 -0.45,-0.84 -1.29,-1.27 -0.84,-0.43 -2.42,-0.43 -1.54,0 -3.09,0.78 -1.54,0.76 -3.09,1.95 0.06,0.45 0.10,1.05 0.04,0.59 0.04,1.17 l 0,13.96 -3.67,0 0,-12.42 q 0,-1.45 -0.14,-2.73 -0.12,-1.31 -0.53,-2.09 -0.45,-0.84 -1.29,-1.25 -0.84,-0.43 -2.42,-0.43 -1.50,0 -3.03,0.74 -1.50,0.74 -3.01,1.89 l 0,16.29 -3.67,0 0,-21.82 3.67,0 0,2.42 q 1.72,-1.43 3.42,-2.23 1.72,-0.80 3.65,-0.80 2.23,0 3.77,0.94 1.56,0.94 2.32,2.60 2.23,-1.88 4.06,-2.70 1.84,-0.84 3.93,-0.84 3.59,0 5.29,2.19 1.72,2.17 1.72,6.07 l 0,14.16 z" />
<path d="m 270.00,58.08 -3.65,0 0,-2.32 q -0.49,0.33 -1.33,0.94 -0.82,0.59 -1.60,0.94 -0.92,0.45 -2.11,0.74 -1.19,0.31 -2.79,0.31 -2.95,0 -5,-1.95 -2.05,-1.95 -2.05,-4.98 0,-2.48 1.05,-4.00 1.07,-1.54 3.05,-2.42 1.99,-0.88 4.79,-1.19 2.79,-0.31 6.00,-0.47 l 0,-0.57 q 0,-1.25 -0.45,-2.07 -0.43,-0.82 -1.25,-1.29 -0.78,-0.45 -1.88,-0.61 -1.09,-0.16 -2.29,-0.16 -1.45,0 -3.22,0.39 -1.78,0.37 -3.67,1.09 l -0.20,0 0,-3.73 q 1.07,-0.29 3.11,-0.64 2.03,-0.35 4.00,-0.35 2.30,0 4.00,0.39 1.72,0.37 2.97,1.29 1.23,0.90 1.88,2.32 0.64,1.43 0.64,3.54 l 0,14.80 z m -3.65,-5.37 0,-6.07 q -1.68,0.10 -3.96,0.29 -2.27,0.20 -3.59,0.57 -1.58,0.45 -2.56,1.41 -0.98,0.94 -0.98,2.60 0,1.88 1.13,2.83 1.13,0.94 3.46,0.94 1.93,0 3.54,-0.74 1.60,-0.76 2.97,-1.82 z" />
<path d="m 295.35,58.08 -3.67,0 0,-12.42 q 0,-1.50 -0.18,-2.81 -0.18,-1.33 -0.64,-2.07 -0.49,-0.82 -1.41,-1.21 -0.92,-0.41 -2.38,-0.41 -1.50,0 -3.14,0.74 -1.64,0.74 -3.14,1.89 l 0,16.29 -3.67,0 0,-21.82 3.67,0 0,2.42 q 1.72,-1.43 3.55,-2.23 1.84,-0.80 3.77,-0.80 3.54,0 5.39,2.13 1.86,2.13 1.86,6.13 l 0,14.16 z" />
</g>
</svg>
</div>
我已经按照自己的意愿制作了动画。但现在我遇到的问题是如何在动画绘制文字时用黑色填充它们。 我希望你明白我在说什么。 现在它显示的是这样的 http://progsofts.com/animate.html 但是我想要它动画时，它应该用黑色填充文本字母。 如果有人可以帮助我，这是我的代码。
<style>
#animator { //ADJUST NAME TO MATCH YOUR ID
position: relative;
width: 360px; //ADJUST WIDTH TO MATCH WIDTH OF YOUR TEXT
height: 110px; //ADJUST HEIGHT TO MATCH HEIGHT OF YOUR TEXT
margin: 40vh auto 0 auto;
}
#svg-canvas { //ADJUST NAME TO MATCH YOUR ID
position: relative;
width: 360px; //ADJUST WIDTH TO MATCH WIDTH OF YOUR TEXT
height: 110px; //ADJUST HEIGHT TO MATCH HEIGHT OF YOUR TEXT
}
.title {
stroke-dasharray: 500;
stroke-dashoffset: 500;
background:black;
animation: draw 3s linear forwards;
-webkit-animation: draw 3s linear forwards;
-moz-animation: draw 3s linear forwards;
-o-animation: draw 3s linear forwards;
font-weight: bold;
font-size:50px;
font-family: Amatic SC;
-inkscape-font-specification: Amatic SC Bold"
}
@keyframes draw {
to {
stroke-dashoffset: 0;
}
}
@-webkit-keyframes draw {
to {
stroke-dashoffset: 0;
}
}
@-moz-keyframes draw {
to {
stroke-dashoffset: 0;
}
}
@-o-keyframes draw {
to {
stroke-dashoffset: 0;
}
}
</style>
<div id="animator">
<svg id="svg-canvas">
<g
style="font-style:normal;font-weight:normal;font-size:50px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000;fill-opacity:0.5;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:0.5"
id="text4151">
<path class="title" fill-opacity="0" stroke="#000" stroke-miterlimit="10" stroke-width="1.5"
d="m 54.411272,49.131176 q 0,2.167969 -0.820312,3.828125 -0.820313,1.660156 -2.207032,2.734375 -1.640625,1.289062 -3.613281,1.835937 -1.953125,0.546875 -4.980469,0.546875 l -10.3125,0 0,-29.082031 8.613282,0 q 3.183593,0 4.765625,0.234375 1.582031,0.234375 3.027343,0.976563 1.601563,0.839843 2.324219,2.167968 0.722656,1.308594 0.722656,3.144532 0,2.070312 -1.054687,3.535156 -1.054688,1.445312 -2.8125,2.324219 l 0,0.15625 q 2.949219,0.605468 4.648437,2.597656 1.699219,1.972656 1.699219,5 z M 47.907366,36.025707 q 0,-1.054687 -0.351563,-1.777344 -0.351562,-0.722656 -1.132812,-1.171875 -0.917969,-0.527343 -2.226563,-0.644531 -1.308593,-0.136719 -3.242187,-0.136719 l -4.609375,0 0,8.398438 5,0 q 1.816406,0 2.890625,-0.175781 1.074219,-0.195313 1.992187,-0.78125 0.917969,-0.585938 1.289063,-1.503907 0.390625,-0.9375 0.390625,-2.207031 z m 2.480469,13.261719 q 0,-1.757813 -0.527344,-2.792969 -0.527344,-1.035156 -1.914063,-1.757812 -0.9375,-0.488282 -2.285156,-0.625 -1.328125,-0.15625 -3.242187,-0.15625 l -6.074219,0 0,10.820312 5.117187,0 q 2.539063,0 4.160157,-0.253906 1.621093,-0.273438 2.65625,-0.976563 1.09375,-0.761718 1.601562,-1.738281 0.507813,-0.976562 0.507813,-2.519531 z"
style=""
id="path4156" />
<path class="title" fill-opacity="0" stroke="#000" stroke-width="1.5"
d="m 76.55971,58.076488 -3.652344,0 0,-2.324218 q -0.488281,0.332031 -1.328125,0.9375 -0.820313,0.585937 -1.601563,0.9375 -0.917968,0.449218 -2.109375,0.742187 -1.191406,0.3125 -2.792968,0.3125 -2.949219,0 -5,-1.953125 -2.050782,-1.953125 -2.050782,-4.980469 0,-2.480468 1.054688,-4.003906 1.074219,-1.542969 3.046875,-2.421875 1.992187,-0.878906 4.785156,-1.191406 2.792969,-0.3125 5.996094,-0.46875 l 0,-0.566406 q 0,-1.25 -0.449219,-2.070313 -0.429687,-0.820312 -1.25,-1.289062 -0.78125,-0.449219 -1.875,-0.605469 -1.09375,-0.15625 -2.285156,-0.15625 -1.445313,0 -3.222656,0.390625 -1.777344,0.371094 -3.671875,1.09375 l -0.195313,0 0,-3.730469 q 1.074219,-0.292969 3.105469,-0.644531 2.03125,-0.351563 4.003906,-0.351563 2.304688,0 4.003906,0.390625 1.71875,0.371094 2.96875,1.289063 1.230469,0.898437 1.875,2.324219 0.644532,1.425781 0.644532,3.535156 l 0,14.804687 z m -3.652344,-5.371093 0,-6.074219 q -1.679688,0.09766 -3.964844,0.292969 -2.265625,0.195312 -3.59375,0.566406 -1.582031,0.449219 -2.558594,1.40625 -0.976562,0.9375 -0.976562,2.597656 0,1.875 1.132812,2.832031 1.132813,0.9375 3.457032,0.9375 1.933593,0 3.535156,-0.742187 1.601562,-0.761719 2.96875,-1.816406 z"
style=""
id="path4158" />
<path class="title" fill-opacity="0" stroke="#000" stroke-width="1.5"
d="m 102.8683,47.00227 q 0,2.734375 -0.78125,4.921875 -0.76172,2.1875 -2.07031,3.671875 -1.386718,1.542968 -3.046874,2.324218 -1.660156,0.761719 -3.652344,0.761719 -1.855469,0 -3.242187,-0.449219 -1.386719,-0.429687 -2.734375,-1.171875 l -0.234375,1.015625 -3.4375,0 0,-30.390625 3.671875,0 0,10.859375 q 1.542968,-1.269531 3.28125,-2.070312 1.738281,-0.820313 3.90625,-0.820313 3.867187,0 6.09375,2.96875 2.24609,2.96875 2.24609,8.378907 z m -3.789059,0.09766 q 0,-3.90625 -1.289063,-5.917969 -1.289062,-2.03125 -4.160156,-2.03125 -1.601562,0 -3.242187,0.703125 -1.640625,0.683594 -3.046875,1.777344 l 0,12.5 q 1.5625,0.703125 2.675781,0.976562 1.132812,0.273438 2.558594,0.273438 3.046875,0 4.765625,-1.992188 1.738281,-2.011718 1.738281,-6.289062 z"
style=""
id="path4160" />
<path class="title" fill-opacity="0" stroke="#000" stroke-width="1.5"
d="m 126.85268,47.549145 -16.07422,0 q 0,2.011718 0.60547,3.515625 0.60547,1.484375 1.66015,2.441406 1.01563,0.9375 2.40235,1.40625 1.40625,0.46875 3.08594,0.46875 2.22656,0 4.47265,-0.878906 2.26563,-0.898438 3.22266,-1.757813 l 0.19531,0 0,4.003906 q -1.85547,0.78125 -3.78906,1.308594 -1.9336,0.527344 -4.0625,0.527344 -5.42969,0 -8.47656,-2.929688 -3.04688,-2.949218 -3.04688,-8.359375 0,-5.351562 2.91016,-8.496093 2.92968,-3.144532 7.69531,-3.144532 4.41406,0 6.79687,2.578125 2.40235,2.578125 2.40235,7.324219 l 0,1.992188 z m -3.57422,-2.8125 q -0.0195,-2.890625 -1.46484,-4.472657 -1.42579,-1.582031 -4.35547,-1.582031 -2.94922,0 -4.70703,1.738281 -1.73829,1.738282 -1.97266,4.316407 l 12.5,0 z"
style=""
id="path4162" />
<path class="title" fill-opacity="0" stroke="#000" stroke-width="1.5"
d="m 146.03237,40.263988 -0.19532,0 q -0.82031,-0.195312 -1.60156,-0.273437 -0.76172,-0.09766 -1.81641,-0.09766 -1.69921,0 -3.28125,0.761718 -1.58203,0.742188 -3.04687,1.933594 l 0,15.488281 -3.67188,0 0,-21.816406 3.67188,0 0,3.222656 q 2.1875,-1.757812 3.84766,-2.480468 1.67968,-0.742188 3.41796,-0.742188 0.95704,0 1.38672,0.05859 0.42969,0.03906 1.28907,0.175781 l 0,3.769531 z"
style=""
id="path4164" />
<path class="title" fill-opacity="0" stroke="#000" stroke-width="1.5"
d="m 185.13393,58.076488 -22.69531,0 0,-3.59375 17.83203,-22.050781 -17.16797,0 0,-3.4375 21.60156,0 0,3.496094 -18.00781,22.148437 18.4375,0 0,3.4375 z"
style=""
id="path4166" />
<path class="title" fill-opacity="0" stroke="#000" stroke-width="1.5"
d="m 207.02846,58.076488 -3.65234,0 0,-2.324218 q -0.48829,0.332031 -1.32813,0.9375 -0.82031,0.585937 -1.60156,0.9375 -0.91797,0.449218 -2.10938,0.742187 -1.1914,0.3125 -2.79297,0.3125 -2.94921,0 -5,-1.953125 -2.05078,-1.953125 -2.05078,-4.980469 0,-2.480468 1.05469,-4.003906 1.07422,-1.542969 3.04688,-2.421875 1.99218,-0.878906 4.78515,-1.191406 2.79297,-0.3125 5.9961,-0.46875 l 0,-0.566406 q 0,-1.25 -0.44922,-2.070313 -0.42969,-0.820312 -1.25,-1.289062 -0.78125,-0.449219 -1.875,-0.605469 -1.09375,-0.15625 -2.28516,-0.15625 -1.44531,0 -3.22266,0.390625 -1.77734,0.371094 -3.67187,1.09375 l -0.19531,0 0,-3.730469 q 1.07422,-0.292969 3.10547,-0.644531 2.03125,-0.351563 4.0039,-0.351563 2.30469,0 4.00391,0.390625 1.71875,0.371094 2.96875,1.289063 1.23047,0.898437 1.875,2.324219 0.64453,1.425781 0.64453,3.535156 l 0,14.804687 z m -3.65234,-5.371093 0,-6.074219 q -1.67969,0.09766 -3.96485,0.292969 -2.26562,0.195312 -3.59375,0.566406 -1.58203,0.449219 -2.55859,1.40625 -0.97656,0.9375 -0.97656,2.597656 0,1.875 1.13281,2.832031 1.13281,0.9375 3.45703,0.9375 1.93359,0 3.53516,-0.742187 1.60156,-0.761719 2.96875,-1.816406 z"
style=""
id="path4168" />
<path class="title" fill-opacity="0" stroke="#000" stroke-width="1.5"
d="m 245.97377,58.076488 -3.67187,0 0,-12.421875 q 0,-1.40625 -0.13672,-2.714843 -0.11719,-1.308594 -0.52735,-2.089844 -0.44921,-0.839844 -1.28906,-1.269531 -0.83984,-0.429688 -2.42187,-0.429688 -1.54297,0 -3.08594,0.78125 -1.54297,0.761719 -3.08594,1.953125 0.0586,0.449219 0.0977,1.054688 0.0391,0.585937 0.0391,1.171875 l 0,13.964843 -3.67187,0 0,-12.421875 q 0,-1.445312 -0.13672,-2.734375 -0.11719,-1.308593 -0.52735,-2.089843 -0.44922,-0.839844 -1.28906,-1.25 -0.83984,-0.429688 -2.42187,-0.429688 -1.50391,0 -3.02735,0.742188 -1.5039,0.742187 -3.00781,1.894531 l 0,16.289062 -3.67188,0 0,-21.816406 3.67188,0 0,2.421875 q 1.71875,-1.425781 3.41797,-2.226562 1.71875,-0.800782 3.65234,-0.800782 2.22656,0 3.76953,0.9375 1.5625,0.9375 2.32422,2.597657 2.22656,-1.875 4.0625,-2.695313 1.83594,-0.839844 3.92578,-0.839844 3.59375,0 5.29297,2.1875 1.71875,2.167969 1.71875,6.074219 l 0,14.160156 z"
style=""
id="path4170" />
<path class="title" fill-opacity="0" stroke="#000" stroke-width="1.5"
d="m 269.99721,58.076488 -3.65234,0 0,-2.324218 q -0.48829,0.332031 -1.32813,0.9375 -0.82031,0.585937 -1.60156,0.9375 -0.91797,0.449218 -2.10938,0.742187 -1.1914,0.3125 -2.79297,0.3125 -2.94921,0 -5,-1.953125 -2.05078,-1.953125 -2.05078,-4.980469 0,-2.480468 1.05469,-4.003906 1.07422,-1.542969 3.04688,-2.421875 1.99218,-0.878906 4.78515,-1.191406 2.79297,-0.3125 5.9961,-0.46875 l 0,-0.566406 q 0,-1.25 -0.44922,-2.070313 -0.42969,-0.820312 -1.25,-1.289062 -0.78125,-0.449219 -1.875,-0.605469 -1.09375,-0.15625 -2.28516,-0.15625 -1.44531,0 -3.22266,0.390625 -1.77734,0.371094 -3.67187,1.09375 l -0.19531,0 0,-3.730469 q 1.07422,-0.292969 3.10547,-0.644531 2.03125,-0.351563 4.0039,-0.351563 2.30469,0 4.00391,0.390625 1.71875,0.371094 2.96875,1.289063 1.23047,0.898437 1.875,2.324219 0.64453,1.425781 0.64453,3.535156 l 0,14.804687 z m -3.65234,-5.371093 0,-6.074219 q -1.67969,0.09766 -3.96485,0.292969 -2.26562,0.195312 -3.59375,0.566406 -1.58203,0.449219 -2.55859,1.40625 -0.97656,0.9375 -0.97656,2.597656 0,1.875 1.13281,2.832031 1.13281,0.9375 3.45703,0.9375 1.93359,0 3.53516,-0.742187 1.60156,-0.761719 2.96875,-1.816406 z"
style=""
id="path4172" />
<path class="title" fill-opacity="0" stroke="#000" stroke-width="1.5"
d="m 295.34877,58.076488 -3.67187,0 0,-12.421875 q 0,-1.503906 -0.17578,-2.8125 -0.17579,-1.328125 -0.64454,-2.070312 -0.48828,-0.820313 -1.40625,-1.210938 -0.91796,-0.410156 -2.38281,-0.410156 -1.5039,0 -3.14453,0.742188 -1.64062,0.742187 -3.14453,1.894531 l 0,16.289062 -3.67188,0 0,-21.816406 3.67188,0 0,2.421875 q 1.71875,-1.425781 3.55469,-2.226562 1.83593,-0.800782 3.76953,-0.800782 3.53515,0 5.39062,2.128907 1.85547,2.128906 1.85547,6.132812 l 0,14.160156 z"
style=""
id="path4174" />
</g>
</g>
</svg>
</div>
希望尽快得到帮助。
谢谢
您只需为填充不透明度设置动画。将此添加到关键帧样式：
fill-opacity:1.0;
#animator { position:relative; width:320px; height:90px; margin:40vh auto 0 auto; }
#svg-canvas { position:relative; width:320px; height:90px; }
.title path { stroke-dasharray:500; stroke-dashoffset:500; animation:draw 3s linear forwards; -webkit-animation:draw 3s linear forwards; -moz-animation:draw 3s linear forwards; -o-animation:draw 3s linear forwards; }
@keyframes draw { to { stroke-dashoffset:0; fill-opacity:1.0; } }
@-webkit-keyframes draw { to { stroke-dashoffset:0; fill-opacity:1.0; } }
@-moz-keyframes draw { to { stroke-dashoffset:0; fill-opacity:1.0; } }
@-o-keyframes draw { to { stroke-dashoffset:0; fill-opacity:1.0; } }
<div id="animator">
<svg id="svg-canvas" width="320" height="90" viewBox="0 0 320 90">
<g fill="#000" stroke="#000" fill-opacity="0" stroke-width="1.5" stroke-opacity="0.5" class="title">
<path d="m 54.41,49.13 q 0,2.17 -0.82,3.83 -0.82,1.66 -2.21,2.73 -1.64,1.29 -3.61,1.84 -1.95,0.55 -4.98,0.55 l -10.31,0 0,-29.08 8.61,0 q 3.18,0 4.77,0.23 1.58,0.23 3.03,0.98 1.60,0.84 2.32,2.17 0.72,1.31 0.72,3.14 0,2.07 -1.05,3.54 -1.05,1.45 -2.81,2.32 l 0,0.16 q 2.95,0.61 4.65,2.60 1.70,1.97 1.70,5 z M 47.91,36.03 q 0,-1.05 -0.35,-1.78 -0.35,-0.72 -1.13,-1.17 -0.92,-0.53 -2.23,-0.64 -1.31,-0.14 -3.24,-0.14 l -4.61,0 0,8.40 5,0 q 1.82,0 2.89,-0.18 1.07,-0.20 1.99,-0.78 0.92,-0.59 1.29,-1.50 0.39,-0.94 0.39,-2.21 z m 2.48,13.26 q 0,-1.76 -0.53,-2.79 -0.53,-1.04 -1.91,-1.76 -0.94,-0.49 -2.29,-0.62 -1.33,-0.16 -3.24,-0.16 l -6.07,0 0,10.82 5.12,0 q 2.54,0 4.16,-0.25 1.62,-0.27 2.66,-0.98 1.09,-0.76 1.60,-1.74 0.51,-0.98 0.51,-2.52 z" />
<path d="m 76.56,58.08 -3.65,0 0,-2.32 q -0.49,0.33 -1.33,0.94 -0.82,0.59 -1.60,0.94 -0.92,0.45 -2.11,0.74 -1.19,0.31 -2.79,0.31 -2.95,0 -5,-1.95 -2.05,-1.95 -2.05,-4.98 0,-2.48 1.05,-4.00 1.07,-1.54 3.05,-2.42 1.99,-0.88 4.79,-1.19 2.79,-0.31 6.00,-0.47 l 0,-0.57 q 0,-1.25 -0.45,-2.07 -0.43,-0.82 -1.25,-1.29 -0.78,-0.45 -1.88,-0.61 -1.09,-0.16 -2.29,-0.16 -1.45,0 -3.22,0.39 -1.78,0.37 -3.67,1.09 l -0.20,0 0,-3.73 q 1.07,-0.29 3.11,-0.64 2.03,-0.35 4.00,-0.35 2.30,0 4.00,0.39 1.72,0.37 2.97,1.29 1.23,0.90 1.88,2.32 0.64,1.43 0.64,3.54 l 0,14.80 z m -3.65,-5.37 0,-6.07 q -1.68,0.10 -3.96,0.29 -2.27,0.20 -3.59,0.57 -1.58,0.45 -2.56,1.41 -0.98,0.94 -0.98,2.60 0,1.88 1.13,2.83 1.13,0.94 3.46,0.94 1.93,0 3.54,-0.74 1.60,-0.76 2.97,-1.82 z" />
<path d="m 102.87,47.00 q 0,2.73 -0.78,4.92 -0.76,2.19 -2.07,3.67 -1.39,1.54 -3.05,2.32 -1.66,0.76 -3.65,0.76 -1.86,0 -3.24,-0.45 -1.39,-0.43 -2.73,-1.17 l -0.23,1.02 -3.44,0 0,-30.39 3.67,0 0,10.86 q 1.54,-1.27 3.28,-2.07 1.74,-0.82 3.91,-0.82 3.87,0 6.09,2.97 2.25,2.97 2.25,8.38 z m -3.79,0.10 q 0,-3.91 -1.29,-5.92 -1.29,-2.03 -4.16,-2.03 -1.60,0 -3.24,0.70 -1.64,0.68 -3.05,1.78 l 0,12.50 q 1.56,0.70 2.68,0.98 1.13,0.27 2.56,0.27 3.05,0 4.77,-1.99 1.74,-2.01 1.74,-6.29 z" />
<path d="m 126.85,47.55 -16.07,0 q 0,2.01 0.61,3.52 0.61,1.48 1.66,2.44 1.02,0.94 2.40,1.41 1.41,0.47 3.09,0.47 2.23,0 4.47,-0.88 2.27,-0.90 3.22,-1.76 l 0.20,0 0,4.00 q -1.86,0.78 -3.79,1.31 -1.93,0.53 -4.06,0.53 -5.43,0 -8.48,-2.93 -3.05,-2.95 -3.05,-8.36 0,-5.35 2.91,-8.50 2.93,-3.14 7.70,-3.14 4.41,0 6.80,2.58 2.40,2.58 2.40,7.32 l 0,1.99 z m -3.57,-2.81 q -0.02,-2.89 -1.46,-4.47 -1.43,-1.58 -4.36,-1.58 -2.95,0 -4.71,1.74 -1.74,1.74 -1.97,4.32 l 12.50,0 z" />
<path d="m 146.03,40.26 -0.20,0 q -0.82,-0.20 -1.60,-0.27 -0.76,-0.10 -1.82,-0.10 -1.70,0 -3.28,0.76 -1.58,0.74 -3.05,1.93 l 0,15.49 -3.67,0 0,-21.82 3.67,0 0,3.22 q 2.19,-1.76 3.85,-2.48 1.68,-0.74 3.42,-0.74 0.96,0 1.39,0.06 0.43,0.04 1.29,0.18 l 0,3.77 z" />
<path d="m 185.13,58.08 -22.70,0 0,-3.59 17.83,-22.05 -17.17,0 0,-3.44 21.60,0 0,3.50 -18.01,22.15 18.44,0 0,3.44 z" />
<path d="m 207.03,58.08 -3.65,0 0,-2.32 q -0.49,0.33 -1.33,0.94 -0.82,0.59 -1.60,0.94 -0.92,0.45 -2.11,0.74 -1.19,0.31 -2.79,0.31 -2.95,0 -5,-1.95 -2.05,-1.95 -2.05,-4.98 0,-2.48 1.05,-4.00 1.07,-1.54 3.05,-2.42 1.99,-0.88 4.79,-1.19 2.79,-0.31 6.00,-0.47 l 0,-0.57 q 0,-1.25 -0.45,-2.07 -0.43,-0.82 -1.25,-1.29 -0.78,-0.45 -1.88,-0.61 -1.09,-0.16 -2.29,-0.16 -1.45,0 -3.22,0.39 -1.78,0.37 -3.67,1.09 l -0.20,0 0,-3.73 q 1.07,-0.29 3.11,-0.64 2.03,-0.35 4.00,-0.35 2.30,0 4.00,0.39 1.72,0.37 2.97,1.29 1.23,0.90 1.88,2.32 0.64,1.43 0.64,3.54 l 0,14.80 z m -3.65,-5.37 0,-6.07 q -1.68,0.10 -3.96,0.29 -2.27,0.20 -3.59,0.57 -1.58,0.45 -2.56,1.41 -0.98,0.94 -0.98,2.60 0,1.88 1.13,2.83 1.13,0.94 3.46,0.94 1.93,0 3.54,-0.74 1.60,-0.76 2.97,-1.82 z" />
<path d="m 245.97,58.08 -3.67,0 0,-12.42 q 0,-1.41 -0.14,-2.71 -0.12,-1.31 -0.53,-2.09 -0.45,-0.84 -1.29,-1.27 -0.84,-0.43 -2.42,-0.43 -1.54,0 -3.09,0.78 -1.54,0.76 -3.09,1.95 0.06,0.45 0.10,1.05 0.04,0.59 0.04,1.17 l 0,13.96 -3.67,0 0,-12.42 q 0,-1.45 -0.14,-2.73 -0.12,-1.31 -0.53,-2.09 -0.45,-0.84 -1.29,-1.25 -0.84,-0.43 -2.42,-0.43 -1.50,0 -3.03,0.74 -1.50,0.74 -3.01,1.89 l 0,16.29 -3.67,0 0,-21.82 3.67,0 0,2.42 q 1.72,-1.43 3.42,-2.23 1.72,-0.80 3.65,-0.80 2.23,0 3.77,0.94 1.56,0.94 2.32,2.60 2.23,-1.88 4.06,-2.70 1.84,-0.84 3.93,-0.84 3.59,0 5.29,2.19 1.72,2.17 1.72,6.07 l 0,14.16 z" />
<path d="m 270.00,58.08 -3.65,0 0,-2.32 q -0.49,0.33 -1.33,0.94 -0.82,0.59 -1.60,0.94 -0.92,0.45 -2.11,0.74 -1.19,0.31 -2.79,0.31 -2.95,0 -5,-1.95 -2.05,-1.95 -2.05,-4.98 0,-2.48 1.05,-4.00 1.07,-1.54 3.05,-2.42 1.99,-0.88 4.79,-1.19 2.79,-0.31 6.00,-0.47 l 0,-0.57 q 0,-1.25 -0.45,-2.07 -0.43,-0.82 -1.25,-1.29 -0.78,-0.45 -1.88,-0.61 -1.09,-0.16 -2.29,-0.16 -1.45,0 -3.22,0.39 -1.78,0.37 -3.67,1.09 l -0.20,0 0,-3.73 q 1.07,-0.29 3.11,-0.64 2.03,-0.35 4.00,-0.35 2.30,0 4.00,0.39 1.72,0.37 2.97,1.29 1.23,0.90 1.88,2.32 0.64,1.43 0.64,3.54 l 0,14.80 z m -3.65,-5.37 0,-6.07 q -1.68,0.10 -3.96,0.29 -2.27,0.20 -3.59,0.57 -1.58,0.45 -2.56,1.41 -0.98,0.94 -0.98,2.60 0,1.88 1.13,2.83 1.13,0.94 3.46,0.94 1.93,0 3.54,-0.74 1.60,-0.76 2.97,-1.82 z" />
<path d="m 295.35,58.08 -3.67,0 0,-12.42 q 0,-1.50 -0.18,-2.81 -0.18,-1.33 -0.64,-2.07 -0.49,-0.82 -1.41,-1.21 -0.92,-0.41 -2.38,-0.41 -1.50,0 -3.14,0.74 -1.64,0.74 -3.14,1.89 l 0,16.29 -3.67,0 0,-21.82 3.67,0 0,2.42 q 1.72,-1.43 3.55,-2.23 1.84,-0.80 3.77,-0.80 3.54,0 5.39,2.13 1.86,2.13 1.86,6.13 l 0,14.16 z" />
</g>
</svg>
</div>