html - 为 SVG 图像设置动画，就好像它在绘制自己一样

Question

首先，对于我认为有点愚蠢的问题感到抱歉 - 我只是想不通!

我基本上有一个 SVG 图像，其中包含一些文本，上面写着“Sheff 制作的音乐”。

我希望文本显示或动画化，就好像它本身是在绘图(而不是打字机效果)。

目前，我的绘图动画只是发生在 SVG 上，而不是实际从无到有。

如果你访问这个codepen你就会明白我的意思... http://codepen.io/skoster7/pen/QpwbWV?editors=1100

这是 HTML 和 SVG

<svg id="svg" version="1.1" width="1000" height="749" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display: block;" fill="transparent"> <path class="logo" d="M263.500 249.899 C 266.635 249.967,271.765 249.967,274.900 249.899 C 278.035 249.832,275.470 249.776,269.200 249.776 C 262.930 249.776,260.365 249.832,263.500 249.899 " stroke="none" fill="#000000" fill-rule="evenodd"></path><path id="path1" class="logo" d="M217.228 12.784 C 210.610 15.244,207.800 19.790,207.800 28.037 L 207.800 33.074 209.377 36.181 C 211.402 40.170,213.998 42.488,220.504 46.115 C 230.667 51.781,234.243 58.257,231.816 66.604 C 228.883 76.693,217.143 79.242,210.406 71.253 C 208.497 68.990,208.464 68.973,207.429 69.729 C 206.449 70.446,207.305 72.138,209.690 74.195 C 218.289 81.615,230.527 78.483,233.975 67.982 C 237.151 58.306,232.589 49.369,221.643 43.822 C 211.540 38.702,208.014 31.881,210.774 22.796 C 213.699 13.165,225.758 11.169,231.702 19.331 C 232.217 20.038,232.265 20.038,233.158 19.315 L 234.080 18.568 232.729 16.784 C 229.629 12.692,222.455 10.841,217.228 12.784 M264.113 12.362 C 253.999 14.966,248.069 27.000,248.030 45.000 C 247.979 68.487,258.644 82.110,273.273 77.242 C 277.071 75.978,283.149 69.936,282.188 68.380 C 281.384 67.080,280.417 67.198,279.646 68.692 C 276.361 75.061,267.896 77.802,261.771 74.481 C 246.240 66.060,246.404 23.628,262.000 15.534 C 264.543 14.214,270.987 14.173,273.403 15.462 C 275.059 16.346,279.200 20.427,279.200 21.176 C 279.200 21.803,280.227 21.690,280.800 21.000 C 283.875 17.294,270.948 10.603,264.113 12.362 M116.400 45.200 L 116.400 76.800 117.600 76.800 L 118.800 76.800 118.832 47.300 C 118.859 21.959,118.939 18.026,119.404 19.400 C 119.702 20.280,120.873 23.970,122.006 27.600 C 123.140 31.230,124.670 36.090,125.406 38.400 C 126.142 40.710,127.851 46.200,129.204 50.600 C 130.556 55.000,132.176 60.220,132.804 62.200 C 133.431 64.180,134.722 68.274,135.672 71.298 L 137.400 76.795 138.815 76.798 L 140.230 76.800 141.896 71.300 C 143.594 65.696,145.075 60.948,148.790 49.200 C 151.518 40.574,154.088 32.337,156.216 25.400 C 157.161 22.320,158.118 19.350,158.342 18.800 C 158.624 18.107,158.757 26.860,158.775 47.300 L 158.800 76.800 160.000 76.800 L 161.200 76.800 161.200 45.200 L 161.200 13.600 159.269 13.600 L 157.338 13.600 155.919 18.300 C 155.139 20.885,153.867 25.070,153.094 27.600 C 152.320 30.130,150.754 35.260,149.614 39.000 C 148.475 42.740,147.384 46.160,147.190 46.600 C 146.997 47.040,146.191 49.650,145.400 52.400 C 144.609 55.150,143.799 57.760,143.600 58.200 C 143.401 58.640,142.595 61.250,141.807 64.000 C 141.020 66.750,140.202 69.313,139.988 69.695 C 139.775 70.077,139.600 70.560,139.600 70.769 C 139.600 70.977,139.402 71.655,139.159 72.274 C 138.668 73.530,139.163 74.847,134.621 60.200 C 133.597 56.900,131.945 51.590,130.949 48.400 C 129.953 45.210,128.347 40.034,127.379 36.897 C 126.410 33.761,124.792 28.541,123.783 25.297 C 122.773 22.054,121.555 18.095,121.077 16.500 L 120.206 13.600 118.303 13.600 L 116.400 13.600 116.400 45.200 M169.201 34.300 C 169.203 61.381,169.671 66.151,172.842 71.431 C 178.728 81.231,194.380 80.327,199.192 69.910 C 201.630 64.632,201.705 63.732,201.891 37.500 L 202.061 13.600 200.855 13.600 L 199.650 13.600 199.491 37.900 C 199.318 64.207,199.358 63.711,196.992 68.638 C 192.676 77.628,180.266 78.797,175.253 70.686 C 171.999 65.420,171.600 61.560,171.600 35.310 L 171.600 13.600 170.400 13.600 L 169.200 13.600 169.201 34.300 M186.779 96.500 C 186.767 96.555,186.035 99.390,185.153 102.800 C 184.271 106.210,182.764 112.060,181.804 115.800 C 180.844 119.540,178.322 129.260,176.200 137.400 C 169.838 161.795,170.344 159.200,171.950 159.200 C 173.100 159.200,173.101 159.196,174.724 152.900 C 175.616 149.435,176.651 145.475,177.023 144.100 L 177.698 141.600 188.589 141.600 L 199.480 141.600 201.582 149.900 C 202.739 154.465,203.750 158.425,203.830 158.700 C 203.983 159.229,206.400 159.415,206.400 158.897 C 206.400 158.731,206.204 157.966,205.964 157.197 C 205.724 156.429,204.747 152.650,203.794 148.800 C 200.921 137.197,198.185 126.218,196.218 118.400 C 195.194 114.330,193.640 108.030,192.765 104.400 C 191.890 100.770,191.077 97.485,190.960 97.100 C 190.781 96.514,186.895 95.956,186.779 96.500 M207.600 127.800 L 207.600 159.200 215.213 159.200 C 228.862 159.200,232.869 156.585,238.203 144.200 C 241.700 136.080,240.960 116.916,236.813 108.228 C 232.416 99.014,227.623 96.400,215.127 96.400 L 207.600 96.400 207.600 127.800 M246.400 127.800 L 246.400 159.200 258.200 159.200 C 269.733 159.200,270.000 159.182,270.000 158.400 C 270.000 157.620,269.733 157.600,259.200 157.600 L 248.400 157.600 248.400 142.800 L 248.400 128.000 258.200 128.000 L 268.000 128.000 268.000 126.800 L 268.000 125.600 258.200 125.600 L 248.400 125.600 248.400 112.000 L 248.400 98.400 258.800 98.400 L 269.200 98.400 269.200 97.400 L 269.200 96.400 257.800 96.400 L 246.400 96.400 246.400 127.800 M223.000 98.942 C 241.656 103.914,244.164 146.398,226.334 155.433 C 223.641 156.798,219.264 157.568,214.100 157.586 L 210.000 157.600 210.000 128.000 L 210.000 98.400 215.500 98.405 C 218.798 98.408,221.801 98.623,223.000 98.942 M191.162 107.800 C 192.294 112.420,193.494 117.280,193.827 118.600 C 194.160 119.920,195.136 123.915,195.995 127.479 C 196.854 131.042,197.836 134.899,198.178 136.051 C 199.326 139.918,200.184 139.600,188.600 139.600 C 182.990 139.600,178.400 139.450,178.400 139.266 C 178.400 139.082,179.587 134.267,181.037 128.566 C 182.487 122.865,184.462 115.050,185.425 111.200 C 188.392 99.336,188.547 98.786,188.828 99.097 C 188.979 99.264,190.029 103.180,191.162 107.800 M179.600 186.200 L 179.600 198.400 182.000 198.400 L 184.400 198.400 184.400 186.200 L 184.400 174.000 182.000 174.000 L 179.600 174.000 179.600 186.200 M144.400 249.800 L 144.400 287.600 145.600 287.600 L 146.800 287.600 146.800 268.800 L 146.800 250.000 164.200 250.000 L 181.600 250.000 181.600 268.800 L 181.600 287.600 183.000 287.600 L 184.400 287.600 184.400 249.800 L 184.400 212.000 183.000 212.000 L 181.600 212.000 181.600 229.800 L 181.600 247.600 164.200 247.600 L 146.800 247.600 146.800 229.800 L 146.800 212.000 145.600 212.000 L 144.400 212.000 144.400 249.800 M193.200 249.800 L 193.200 287.600 207.400 287.600 L 221.600 287.600 221.600 286.400 L 221.600 285.200 208.800 285.200 L 196.000 285.200 196.000 267.606 L 196.000 250.012 207.500 249.906 L 219.000 249.800 219.125 248.500 L 219.251 247.200 207.625 247.200 L 196.000 247.200 196.000 231.000 L 196.000 214.800 208.400 214.800 L 220.800 214.800 220.800 213.400 L 220.800 212.000 207.000 212.000 L 193.200 212.000 193.200 249.800 M225.200 249.800 L 225.200 287.600 226.600 287.600 L 228.000 287.600 228.000 268.806 L 228.000 250.012 239.300 249.906 L 250.600 249.800 250.725 248.500 L 250.851 247.200 239.425 247.200 L 228.000 247.200 228.000 231.000 L 228.000 214.800 240.200 214.800 L 252.400 214.800 252.400 213.400 L 252.400 212.000 238.800 212.000 L 225.200 212.000 225.200 249.800 " stroke="none" fill="#ffffff" fill-rule="evenodd"></path><path id="path2" d="M200.937 177.000 C 200.939 178.760,201.009 179.430,201.093 178.489 C 201.178 177.549,201.177 176.109,201.091 175.289 C 201.005 174.470,200.936 175.240,200.937 177.000 M200.937 183.400 C 200.939 185.160,201.009 185.830,201.093 184.889 C 201.178 183.949,201.177 182.509,201.091 181.689 C 201.005 180.870,200.936 181.640,200.937 183.400 M200.914 188.600 C 200.917 189.700,200.995 190.103,201.087 189.495 C 201.179 188.886,201.177 187.986,201.082 187.495 C 200.987 187.003,200.911 187.500,200.914 188.600 " stroke="none" fill="#e494ae" fill-rule="evenodd"></path><path id="path3" d="M264.125 214.699 C 267.604 214.766,273.184 214.766,276.525 214.699 C 279.866 214.632,277.020 214.578,270.200 214.578 C 263.380 214.578,260.646 214.633,264.125 214.699 " stroke="none" fill="#ef8faf" fill-rule="evenodd"></path><path id="path4" d="M240.000 45.200 L 240.000 76.800 241.200 76.800 L 242.400 76.800 242.400 45.200 L 242.400 13.600 241.200 13.600 L 240.000 13.600 240.000 45.200 M124.000 127.800 L 124.000 159.200 125.200 159.200 L 126.400 159.200 126.432 129.300 C 126.449 112.855,126.611 99.850,126.792 100.400 C 127.455 102.414,132.258 117.797,136.471 131.400 C 139.300 140.534,142.428 150.470,143.875 154.922 L 145.281 159.243 146.690 159.122 L 148.099 159.000 149.461 154.600 C 150.211 152.180,150.904 149.930,151.003 149.600 C 151.101 149.270,152.008 146.390,153.017 143.200 C 154.898 137.252,157.147 130.069,160.218 120.200 C 161.176 117.120,163.004 111.270,164.280 107.200 L 166.600 99.800 166.703 129.500 L 166.805 159.200 168.003 159.200 L 169.200 159.200 169.200 127.800 L 169.200 96.400 167.248 96.400 L 165.296 96.400 164.020 100.500 C 163.319 102.755,161.957 107.120,160.995 110.200 C 159.172 116.033,156.790 123.724,153.746 133.600 C 152.763 136.790,151.444 141.020,150.815 143.000 C 150.186 144.980,148.989 148.829,148.154 151.553 L 146.636 156.507 145.958 154.353 C 145.585 153.169,144.529 149.770,143.611 146.800 C 142.694 143.830,141.343 139.510,140.609 137.200 C 139.400 133.392,137.887 128.492,133.137 113.000 C 132.260 110.140,130.725 105.235,129.726 102.100 L 127.909 96.400 125.955 96.400 L 124.000 96.400 124.000 127.800 M189.200 186.182 L 189.200 198.400 191.436 198.400 L 193.671 198.400 193.536 190.233 C 193.461 185.741,193.433 182.098,193.473 182.139 C 193.576 182.242,200.000 198.126,200.000 198.276 C 200.000 198.344,201.080 198.400,202.400 198.400 L 204.800 198.400 204.800 186.200 L 204.800 174.000 203.000 174.000 L 201.200 174.000 201.187 182.300 L 201.173 190.600 197.887 182.400 L 194.600 174.200 191.900 174.082 L 189.200 173.963 189.200 186.182 M118.859 211.029 C 109.429 213.565,104.028 225.108,107.328 235.672 C 109.524 242.701,113.027 246.160,123.600 251.737 C 135.840 258.193,139.930 271.294,132.786 281.156 C 127.154 288.931,112.970 287.940,108.429 279.454 C 107.755 278.196,107.172 278.126,106.209 279.190 C 105.146 280.364,106.832 282.773,110.800 285.750 L 113.000 287.400 121.076 287.523 C 130.268 287.662,130.411 287.627,133.580 284.458 C 137.426 280.612,138.998 275.745,138.722 268.540 C 138.386 259.764,134.205 254.361,123.200 248.485 C 111.077 242.012,106.802 234.037,109.932 223.733 C 113.478 212.060,127.776 208.970,134.817 218.355 C 135.756 219.607,135.901 219.668,136.717 219.159 C 138.062 218.319,137.797 217.436,135.500 215.100 C 131.408 210.939,125.012 209.373,118.859 211.029 M255.386 212.495 C 255.280 212.773,255.240 229.740,255.297 250.200 L 255.400 287.400 256.700 287.525 L 258.000 287.651 258.000 268.625 L 258.000 249.600 269.400 249.600 L 280.800 249.600 280.800 248.400 L 280.800 247.200 269.400 247.200 L 258.000 247.200 258.000 230.800 L 258.000 214.400 270.227 214.400 L 282.453 214.400 282.327 213.300 L 282.200 212.200 268.890 212.095 C 258.456 212.012,255.537 212.098,255.386 212.495" stroke="none" fill="#f4a4c1" fill-rule="evenodd"></path></g></svg>

这是 CSS..

body {
  background: black; 
}

.logo {
  stroke: white;
  stroke-width: 1; 
  stroke-dasharray: 1000; 
  stroke-dashoffset: 1000;
  animation: offset 4s linear forwards, .8s 5s forwards;
}

@keyframes offset {
  100% {
    stroke-dashoffset: 1; 
  }  
}

@keyframes fill-it {
  100% {
    fill: #6fbc6d; 
  }
}

感谢您的帮助!

Answer 1

好吧，你的 svg 非常杂乱无章，所以有你的新代码:

body {
  background: black; 
}

#MUSIC {
  width:auto;
         height:320px;
}

#MMIS path{
/*   stroke: white; */
  stroke-width:3; 
  stroke-dasharray: 1000; 
  stroke-dashoffset: 1000;
  animation: offset 4s linear forwards;
}

@keyframes offset {
  100% {
    stroke-dashoffset: 1; 
  }  
}

@keyframes fill-it {
  100% {
/*     fill: #6fbc6d;  */
  }
}

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="MUSIC" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="411.3 115.7 217.3 322" style="enable-background:new 411.3 115.7 217.3 322;" xml:space="preserve">
<style type="text/css">
	.st0{fill:none;stroke:#F2DFDF;stroke-width:2;stroke-miterlimit:10;}
	.st1{fill:none;stroke:#F4A4C1;stroke-width:2;stroke-miterlimit:10;}
</style>
<g id="MMIS">
	<path id="M" class="st0" d="M420.9,120.8l21.1,48.4l21.1-48.4h2.8v51.2h-1.9v-48.4l-21.2,48.4h-1.5l-21.1-48.1v48.1h-1.9v-51.2
		H420.9z"/>
	<path id="U" class="st0" d="M514.4,120.8v34.7c0,5.4-1.6,9.6-4.7,12.7c-3.1,3-7.4,4.6-12.8,4.6s-9.6-1.5-12.8-4.6
		c-3.1-3-4.7-7.2-4.7-12.5v-34.8h1.9v34.6c0,4.7,1.4,8.5,4.3,11.3c2.8,2.8,6.6,4.1,11.3,4.1s8.5-1.4,11.3-4.1
		c2.8-2.8,4.3-6.5,4.3-11.3v-34.6H514.4z"/>
	<path id="S" class="st0" d="M558.5,159.7c0-2.2-0.5-4-1.5-5.5s-2.6-2.8-4.8-4s-5.5-2.3-9.9-3.6c-4.4-1.2-7.8-2.4-10-3.7
		c-2.2-1.2-3.8-2.7-4.9-4.3c-1-1.6-1.5-3.6-1.5-6c0-3.7,1.6-6.7,4.7-9.1c3.1-2.3,7.2-3.5,12.3-3.5c3.3,0,6.2,0.6,8.8,1.9
		c2.6,1.3,4.6,3.1,6.1,5.4c1.4,2.3,2.1,4.9,2.1,7.8H558c0-3.8-1.4-7-4.2-9.5s-6.5-3.7-10.9-3.7c-4.5,0-8.1,1-10.9,3
		s-4.2,4.5-4.2,7.5c0,3.1,1.2,5.5,3.6,7.4c2.4,1.9,6.4,3.5,12,5s9.6,3.1,12.2,5c3.3,2.4,4.9,5.6,4.9,9.7c0,2.6-0.7,4.9-2.2,6.8
		c-1.5,2-3.5,3.5-6.2,4.6s-5.7,1.6-9,1.6c-3.7,0-7-0.6-10-1.8s-5.2-3-6.7-5.3c-1.5-2.3-2.2-5-2.2-8.1h1.9c0,4.2,1.6,7.5,4.7,9.8
		s7.2,3.5,12.3,3.5c4.5,0,8.2-1,11.1-3.1C557.1,165.6,558.5,163,558.5,159.7z"/>
	<path id="I" class="st1" d="M573.8,171.9h-1.9v-51.2h1.9V171.9z"/>
	<path id="C" class="st0" d="M624,156.3c-0.5,5.3-2.3,9.3-5.4,12.1c-3.1,2.8-7.4,4.2-12.8,4.2c-3.6,0-6.8-0.9-9.7-2.8
		c-2.8-1.8-5-4.5-6.5-7.8c-1.5-3.4-2.3-7.3-2.4-11.6v-7.9c0-4.4,0.8-8.3,2.3-11.7c1.5-3.4,3.7-6.1,6.5-8c2.8-1.9,6.1-2.8,9.7-2.8
		c5.3,0,9.6,1.4,12.8,4.2s5,6.8,5.5,12.1h-1.9c-0.5-4.7-2.2-8.3-4.9-10.7c-2.7-2.4-6.6-3.7-11.4-3.7c-5,0-9,1.9-12,5.6
		c-3.1,3.8-4.6,8.8-4.6,15.1v7.5c0,4,0.7,7.6,2,10.7c1.4,3.1,3.3,5.5,5.9,7.3c2.5,1.7,5.5,2.6,8.7,2.6c4.9,0,8.7-1.2,11.5-3.6
		c2.8-2.4,4.4-6,4.9-10.9H624z"/>
	<path id="M_1_" class="st1" d="M430.9,207.2l21.1,48.4l21.1-48.4h2.8v51.2h-1.9V210l-21.2,48.4h-1.5l-21.1-48.1v48.1h-1.9v-51.2
		H430.9z"/>
	<path id="A" class="st0" d="M517.5,243h-25.1l-5.7,15.3h-2.1l19.2-51.2h2.3l19.2,51.2h-2.1L517.5,243z M493.1,241.1h23.7L505,209.4
		L493.1,241.1z"/>
	<path id="D" class="st0" d="M533.5,258.3v-51.2h14.2c4,0,7.5,0.9,10.8,2.8c3.2,1.9,5.7,4.5,7.6,7.9c1.8,3.4,2.8,7.2,2.8,11.4v6.6
		c0,4.3-0.9,8.1-2.7,11.5c-1.8,3.4-4.3,6.1-7.5,8c-3.2,1.9-6.8,2.9-10.8,2.9H533.5z M535.4,209.1v47.4h12.3c3.6,0,6.8-0.9,9.8-2.6
		c2.9-1.7,5.2-4.2,6.9-7.3s2.5-6.6,2.5-10.4v-6.6c0-3.8-0.8-7.3-2.4-10.4c-1.6-3.1-3.9-5.6-6.8-7.3c-2.9-1.8-6.1-2.7-9.7-2.7H535.4z
		"/>
	<path id="E" class="st0" d="M608.2,233h-25.7v23.5h29.3v1.9h-31.1v-51.2h31.1v1.9h-29.3v22h25.7V233z"/>
	<path id="I_1_" class="st0" d="M501.5,335h-1.2v-31.7h1.2V335z"/>
	<path id="N" class="st1" d="M537.1,335H536l-20.5-29.7V335h-1.2v-31.7h1.2l20.5,29.6v-29.6h1.2V335z"/>
	<path id="S_1_" class="st1" d="M448.8,418.9c0-2.2-0.5-4-1.5-5.5s-2.6-2.8-4.8-4s-5.5-2.3-9.9-3.6c-4.4-1.2-7.8-2.4-10-3.7
		c-2.2-1.2-3.8-2.7-4.9-4.3c-1-1.6-1.5-3.6-1.5-6c0-3.7,1.6-6.7,4.7-9.1c3.1-2.3,7.2-3.5,12.3-3.5c3.3,0,6.2,0.6,8.8,1.9
		c2.6,1.3,4.6,3.1,6.1,5.4c1.4,2.3,2.1,4.9,2.1,7.8h-1.9c0-3.8-1.4-7-4.2-9.5s-6.5-3.7-10.9-3.7c-4.5,0-8.1,1-10.9,3
		s-4.2,4.5-4.2,7.5c0,3.1,1.2,5.5,3.6,7.4c2.4,1.9,6.4,3.5,12,5s9.6,3.1,12.2,5c3.3,2.4,4.9,5.6,4.9,9.7c0,2.6-0.7,4.9-2.2,6.8
		c-1.5,2-3.5,3.5-6.2,4.6c-2.7,1.1-5.7,1.6-9,1.6c-3.7,0-7-0.6-10-1.8s-5.2-3-6.7-5.3c-1.5-2.3-2.2-5-2.2-8.1h1.9
		c0,4.2,1.6,7.5,4.7,9.8s7.2,3.5,12.3,3.5c4.5,0,8.2-1,11.1-3.1C447.4,424.8,448.8,422.2,448.8,418.9z"/>
	<path id="H" class="st0" d="M497.2,431.1h-1.9v-25.4h-32.7v25.4h-1.9V380h1.9v23.9h32.7V380h1.9V431.1z"/>
	<path id="E_1_" class="st0" d="M538.9,405.8h-25.7v23.5h29.3v1.9h-31.1V380h31.1v1.9h-29.3v22h25.7V405.8z"/>
	<path id="E_2_" class="st0" d="M579.9,405.8h-25.7v23.5h29.3v1.9h-31.1V380h31.1v1.9h-29.3v22h25.7V405.8z"/>
	<path id="F" class="st1" d="M621.4,405.9h-26.2v25.2h-1.9V380H625v1.9h-29.8V404h26.2V405.9z"/>
</g>
</svg>

希望对您有所帮助。