css [SVG]文字绘图#svg

Posted 2021-05-13

			<svg id="Svg-html-logo" width="481px" height="143px" viewBox="0 0 481 143" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
			    <defs>
			        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
			            <stop stop-color="#85D8CE" offset="0%"></stop>
			            <stop stop-color="#4B8EB3" offset="100%"></stop>
			        </linearGradient>
			    </defs>
			    <g id="Daily-UI-003" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" font-weight="normal" font-family="Lato-Regular, Lato" letter-spacing="3" font-size="120">
			        <g id="Svg.html-Shape" stroke="url(#linearGradient-1)" stroke-width="2" fill="#FFFFFF">
			            <text id="Svg.htm">
			                <tspan x="3.77" y="118">RiverDB</tspan>
			            </text>
			        </g>
			    </g>
			</svg>

@import 'compass';

svg {
  position: absolute;
  top: 40%;
  left: 50%;
  margin-right: 50%;
  transform: translateX(-50%);
}

text {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  -webkit-animation: draw 3s forwards;
  -moz-animation: draw 3s forwards;
  -o-animation: draw 3s forwards;
  -ms-animation: draw 3s forwards;
  animation: draw 3s forwards;
}

@keyframes draw {
  100% {
    stroke-dashoffset: 0;
  }
}