svg werkt niet

Door Jan R op 27-07-2016 07:20

1.472 views

Hoi,

Ik vond op http://www.designyourway.net/blog/web-and-mobile-design/yes-you-can-actually-make-these-text-effects-in-css/ een goed opmaakje met svg en css.
Als ik alles in 1 bestandje giet werkt het echter niet. Wat doe ik fout?


<!DOCTYPE html>
<html>
	<head>
		<title>Elastic stroke CSS + SVG</title>
		<meta charset="utf-8">
		<!-- source: http://codepen.io/yoksel/pen/XJbzrO -->
		<style type="text/css">
			HTML, BODY {
			  height: 100%;
			  }

			$colors: #360745, #D61C59, #E7D84B, #EFEAC5, #1B8798;

			BODY {
			  background: hsl(200, 70%, 11%);
			  background-size: .12em 100%;
			  font: 16em/1 Arial;
			}

			.text--line {
			  font-size: .5em;
			  }

			svg {
			  position: absolute;
			  width: 100%;
			  height: 100%;
			  }

			$max: 5;
			$stroke-step: 7%; 
			.text-copy {
			  fill: none;
			  stroke: white;
			  stroke-dasharray: $stroke-step $stroke-step * ($max - 1);
			  stroke-width: 3px;
			  
			  animation: stroke-offset 9s infinite linear;
			  
			  @for $item from 1 through $max {
			    $stroke-color: nth($colors, $item);
			    
			    &:nth-child(#{$item}) {
			      stroke: $stroke-color;
			      stroke-dashoffset: $stroke-step * $item;
			      }
			    }
			  }

			@keyframes stroke-offset {
			  50% {
			    stroke-dashoffset: $stroke-step * $max;  
			    stroke-dasharray: 0 $stroke-step * $max*2.5;
			  }
			}
		</style>
	</head>
	<body>
		<svg viewBox="0 0 800 600">
		  <symbol id="s-text">
		    <text text-anchor="middle"
		          x="50%"
		          y="35%"
		          class="text--line"
		          >
		      Elastic
		    </text>
		    <text text-anchor="middle"
		          x="50%"
		          y="68%"
		          class="text--line2"
		          >
		      Stroke
		    </text>
		    
		  </symbol>
		  
		  <g class="g-ants">
		    <use xlink:href="#s-text"
		      class="text-copy"></use>     
		    <use xlink:href="#s-text"
		      class="text-copy"></use>     
		    <use xlink:href="#s-text"
		      class="text-copy"></use>     
		    <use xlink:href="#s-text"
		      class="text-copy"></use>     
		    <use xlink:href="#s-text"
		      class="text-copy"></use>     
		  </g>
		</svg>

	</body>
</html>

background hsl heb ik wel al aangepast. params 2 en 3 moeten % zijn.

Jan