SOURCE

console 命令行工具 X clear

                    
>
console
var ctx = document.getElementById('drawBlock').getContext('2d');
var img = new Image();
img.onload = function() {
    ctx.drawImage(img, 0, 0);
}
img.src = "https://sf3-ttcdn-tos.pstatp.com/obj/ttfe/video_editor/textDynamic.svg";
var canvasContainer = document.getElementById('canvasContainer');
canvasContainer.appendChild(img);
var svgDom = document.getElementById("testSVG");
console.log(svgDom);
<div id="canvasContainer">
  <canvas id="drawBlock"></canvas>
</div>
<svg id="testSVG" data-v-5000e08e="" width="676" height="120" viewBox="0 0 676 120" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><linearGradient id="grad10_1" x1="0" y1="0" x2="100%" y2="100%" gradientUnits="userSpaceOnUse"><stop offset="0%" style="stop-color: rgb(0, 254, 255); stop-opacity: 1;"></stop> <stop offset="100%" style="stop-color: rgb(0, 223, 176); stop-opacity: 1;"></stop></linearGradient> <rect width="476" height="8" rx="4" opacity="0" fill="url(#grad10_1)" x="100" y="0"><animate attributeName="y" values="120;0;0" keyTimes="0; 0.000991801110817244; 1" dur="302480ms" keySplines="
      0.25,0.1,0.25,1;0.25,0.1,0.25,1" calcMode="spline"></animate> <animate attributeName="height" values="120;120;8;8" keyTimes="0; 0.0006612007405448294;0.001983602221634488; 1" dur="302480ms" keySplines="
      0.25,0.1,0.25,1;0.25,0.1,0.25,1;0.25,0.1,0.25,1" calcMode="spline"></animate> <animate attributeName="width" values=" 676 ; 676 ;476;476 " keyTimes="0; 0.0016530018513620736;0.0029754033324517325; 1" dur="302480ms" keySplines="
      0.25,0.1,0.25,1;0.25,0.1,0.25,1;0.25,0.1,0.25,1" calcMode="spline"></animate> <animate attributeName="x" values=" 0 ; 0 ;100;100 " keyTimes="0; 0.0016530018513620736;0.0029754033324517325; 1" dur="302480ms" keySplines=" 0.25,0.1,0.25,1;0.25,0.1,0.25,1;0.25,0.1,0.25,1" calcMode="spline"></animate> <animate attributeName="opacity" values="1 ; 1 ;0" keyTimes="0; 0.9983469981486379;1" dur="302480ms"></animate></rect> <foreignObject width="676px" height="120px" id="foreignObject0_1" name="theme" opacity="0" y="0"><div style="display: inline-block; font-size: 72px; white-space: nowrap; min-width: 200px; font-weight: bold; text-align: center; line-height: 120px; color: rgb(255, 255, 255); font-family: &quot;Source Han Sans CN&quot;; text-shadow: rgba(0, 0, 0, 0.5) 0px 2px 4px;"><div style="padding: 0px 22px; box-sizing: border-box;">主题文字(双击)</div></div></foreignObject> <animate xlink:href="#foreignObject0_1" attributeName="opacity" values="0;0;1;1;0" keyTimes="0;0.0016530018513620736;0.0029754033324517325;0.9983469981486379;1" dur="302480ms"></animate> <animate xlink:href="#foreignObject0_1" attributeName="y" values="20;20;0;0" keyTimes="0;0.000991801110817244;0.0026448029621793175;1" dur="302480ms"></animate></svg>
<svg data-v-5000e08e="" width="684" height="140" viewBox="0 0 684 140" xmlns="http://www.w3.org/2000/svg"><linearGradient id="grad10_3" x1="0" y1="0" x2="100%" y2="100%" gradientUnits="userSpaceOnUse"><stop offset="0%" style="stop-color: rgb(0, 254, 255); stop-opacity: 1;"></stop> <stop offset="100%" style="stop-color: rgb(0, 223, 176); stop-opacity: 1;"></stop></linearGradient> <g transform="translate(0,10)"><rect width="684" height="120" rx="4" opacity="0" fill="url(#grad10_3)" x="0" y="0" transform="rotate(0)"><animateTransform attributeName="transform" attributeType="XML" type="rotate" values="-90 342 60;0 342 60;0 342 60" keyTimes="0; 0.002108370229812355; 1" dur="189720ms" keySplines=" 0.25,0.1,0.25,1;0.25,0.1,0.25,1" calcMode="spline"></animateTransform> <animate attributeName="width" values="84 ; 120; 684; 684; 0" keyTimes="0; 0.002108370229812355;0.00421674045962471;0.9984187223276407; 1" dur="189720ms" keySplines="
        0.25,0.1,0.25,1;0.25,0.1,0.25,1;0.25,0.1,0.25,1;0.25,0.1,0.25,1" calcMode="spline"></animate> <animate attributeName="height" values="84 ; 120;120" keyTimes="0; 0.002108370229812355; 1" dur="189720ms" keySplines="
        0.25,0.1,0.25,1;0.25,0.1,0.25,1" calcMode="spline"></animate> <animate attributeName="y" values="17;0;0" keyTimes="0;0.002108370229812355; 1" dur="189720ms" keySplines=" 0.25,0.1,0.25,1;0.25,0.1,0.25,1" calcMode="spline"></animate> <animate attributeName="x" values="300;282;  0;   0; 342 " keyTimes="0;0.002108370229812355;0.00421674045962471;0.9984187223276407; 1" dur="189720ms" keySplines=" 0.25,0.1,0.25,1;0.25,0.1,0.25,1;0.25,0.1,0.25,1;0.25,0.1,0.25,1" calcMode="spline"></animate> <animate attributeName="opacity" values="0;1;1;0" keyTimes="0;0.002108370229812355;0.9984187223276407;1" dur="189720ms"></animate></rect></g> <foreignObject width="684px" height="140px" id="foreignObject0_3" name="theme" opacity="0" y="0"><div style="display: inline-block; font-size: 72px; white-space: nowrap; font-weight: bold; text-align: center; line-height: 140px; color: rgb(255, 255, 255); font-family: &quot;Source Han Sans CN&quot;; text-shadow: rgba(0, 0, 0, 0.5) 0px 2px 4px; min-width: 120px;"><div style="padding: 0px 26px; box-sizing: border-box;">主题文字(双击编辑)</div></div></foreignObject> <animate xlink:href="#foreignObject0_3" attributeName="opacity" values="0;0;1;1;0;0" keyTimes="0;0.0026354627872654437;0.004743833017077799;0.9973645372127345;0.9989458148850938;1" dur="189720ms"></animate> <animate xlink:href="#foreignObject0_3" attributeName="y" values="20;20;0;0;-20;-20" keyTimes="0;0.0015812776723592662;0.00421674045962471; 0.9973645372127345;0.9989458148850938; 1" dur="189720ms"></animate></svg>