Jump to content

Welcome to Geeks to Go - Register now for FREE

Geeks To Go is a helpful hub, where thousands of volunteer geeks quickly serve friendly answers and support. Check out the forums and get free advice from the experts. Register now to gain access to all of our features, it's FREE and only takes one minute. Once registered and logged in, you will be able to create topics, post replies to existing threads, give reputation to your fellow members, get your own private messenger, post status updates, manage your profile and so much more.

Create Account How it Works
Photo

Duplicate animated SVG with Symbol Element not working Thread starter

css webdesign

  • Please log in to reply

#1
right11

right11

    New Member

  • Member
  • Pip
  • 3 posts

For some reason I cannot seem to duplicate the following animated (CSS, not JS) SVG with the Symbol Element ?

<!DOCTYPE html>
<html>
<head>
    <title>Animated Line Drawing</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

        <svg xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="210.7 336.7 125 135" width="340px">
  <!-- Our symbol in its own coordinate system -->
  <symbol id="cube" width="10" height="10" viewBox="0 0 125 135">

        <path fill="transparent" d="M319.4,362.3c-4.3-2.5-11.3,1.4-15.5,8.8l-7.6,13.2c-2.8,5.5-2.4,12.1,1.2,17.2l0.3,0.3
        c3.5,5.1,8.3,9.7,9.8,11.4c0.9,0.9,1.6,2.2,2,3.5c1.3,4.6-1.4,9.4-6,10.6c-4.6,1.3-9.4-1.4-10.6-6c-0.3-1.2-0.4-2.4-0.3-3.4
        c0.3-2-0.4-5-3.1-8s-8.3,2.8-10.1,8.6l-0.1,0.3c-1.8,5.9-2.9,11-2.6,11.5c0.3,0.3,0.4,0.7,0.5,0.9c2.6,5,0.8,10.9-3.9,13.4
        c-4.7,2.5-10.6,0.8-13.2-4.1c-2.5-4.7-0.8-10.6,4.1-13.2c0.3-0.1,0.4-0.3,0.7-0.3c0.4-0.1,1.4-2.6,2.2-5.6c0.9-2.9,1.6-5.4,1.6-5.4
        c0.1-0.3,0.1-0.7,0.3-0.9l4.8-17.2l-5.1,10.6c-0.7-2-1.6-2.1-3.8-0.5c-1.3,0.9-3.5,2.9-4.6,3.5c-2,1.4-3.7,4.2-4.6,6
        c-0.5,1-1.3,2-2.2,2.8c-3.7,3-9,2.5-12.1-1.3c-3-3.7-2.5-9,1.3-12.1c1-0.9,2.4-1.4,3.5-1.7c2.2-0.5,9.6-5,14-8.1
        c0.8-0.5,1.4-1,2-1.6l11.8-9l-10.3,5.6c0,0-1-0.1-2.4,0c-3.8,0.4-7.7,0.9-8.4,1.8c-0.4,0.5-0.9,1-1.6,1.4c-3.4,2.5-8.3,1.7-10.7-1.7
        c-2.5-3.4-1.7-8.3,1.7-10.7c1.4-1,3-1.4,4.7-1.4c2.8,0.1,10.1,1.6,16.1,0.5l1.6-0.3c6-1,13.4-6.4,16.2-11.8c0,0,2.9-5,6.3-11.1
        c3.5-6.2,3.3-12.8-0.5-15.1l-6.9-3.9c-3.5-2-9.2-2-12.7,0l-47.7,26.9c-3.4,2-6.3,6.9-6.3,10.9v52.5c0,4.1,2.9,8.9,6.3,10.9
        l47.7,26.9c3.5,2,9.2,2,12.7,0l47.6-26.9c3.5-2,6.3-6.8,6.3-10.9v-52.5c0-4.1-2.9-8.9-6.3-10.9C327.2,366.8,323.7,364.8,319.4,362.3
        z" />
  </symbol>

   <!-- A grid to materialize our symbol positioning -->

  <!-- All instances of our symbol -->

        <use href="#cube" x="0"  y="0" class="cube-dotted" />


    </svg>
</body>
</html>
@keyframes offset {
    100% {
        stroke-dashoffset: 0;
    }
}

.svg {
    display: block;
    margin: 2em auto 0;
    width: 40%;
}

.cube-dotted {
    stroke: red;
    stroke-width: 2;
    stroke-dasharray: 2.5;
    stroke-dashoffset: 80;

    /* end animation with final keyframe with 'forwards' to avoid line resetting to start value i.e. nothing */
    animation: offset 5s linear forwards;
}

  • 0

Advertisements


#2
zep516

zep516

    Trusted Helper

  • Malware Removal
  • 7,940 posts

Hello,

 

Maybe help here.

 

html - Trying to fill a SVG with CSS, but not working - Stack Overflow


  • 0

#3
right11

right11

    New Member

  • Topic Starter
  • Member
  • Pip
  • 3 posts

I actually managed to get the following working with defs and use:

<!DOCTYPE html>
<html>
<head>
	<title>TEST #6 : Animated Line Drawing</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<svg xmlns="http://www.w3.org/2000/svg" viewBox="200 300 300 500">
		<defs>
			<g id="treehouse">
			<path fill="transparent" d="M319.4,362.3c-4.3-2.5-11.3,1.4-15.5,8.8l-7.6,13.2c-2.8,5.5-2.4,12.1,1.2,17.2l0.3,0.3
			c3.5,5.1,8.3,9.7,9.8,11.4c0.9,0.9,1.6,2.2,2,3.5c1.3,4.6-1.4,9.4-6,10.6c-4.6,1.3-9.4-1.4-10.6-6c-0.3-1.2-0.4-2.4-0.3-3.4
			c0.3-2-0.4-5-3.1-8s-8.3,2.8-10.1,8.6l-0.1,0.3c-1.8,5.9-2.9,11-2.6,11.5c0.3,0.3,0.4,0.7,0.5,0.9c2.6,5,0.8,10.9-3.9,13.4
			c-4.7,2.5-10.6,0.8-13.2-4.1c-2.5-4.7-0.8-10.6,4.1-13.2c0.3-0.1,0.4-0.3,0.7-0.3c0.4-0.1,1.4-2.6,2.2-5.6c0.9-2.9,1.6-5.4,1.6-5.4
			c0.1-0.3,0.1-0.7,0.3-0.9l4.8-17.2l-5.1,10.6c-0.7-2-1.6-2.1-3.8-0.5c-1.3,0.9-3.5,2.9-4.6,3.5c-2,1.4-3.7,4.2-4.6,6
			c-0.5,1-1.3,2-2.2,2.8c-3.7,3-9,2.5-12.1-1.3c-3-3.7-2.5-9,1.3-12.1c1-0.9,2.4-1.4,3.5-1.7c2.2-0.5,9.6-5,14-8.1
			c0.8-0.5,1.4-1,2-1.6l11.8-9l-10.3,5.6c0,0-1-0.1-2.4,0c-3.8,0.4-7.7,0.9-8.4,1.8c-0.4,0.5-0.9,1-1.6,1.4c-3.4,2.5-8.3,1.7-10.7-1.7
			c-2.5-3.4-1.7-8.3,1.7-10.7c1.4-1,3-1.4,4.7-1.4c2.8,0.1,10.1,1.6,16.1,0.5l1.6-0.3c6-1,13.4-6.4,16.2-11.8c0,0,2.9-5,6.3-11.1
			c3.5-6.2,3.3-12.8-0.5-15.1l-6.9-3.9c-3.5-2-9.2-2-12.7,0l-47.7,26.9c-3.4,2-6.3,6.9-6.3,10.9v52.5c0,4.1,2.9,8.9,6.3,10.9
			l47.7,26.9c3.5,2,9.2,2,12.7,0l47.6-26.9c3.5-2,6.3-6.8,6.3-10.9v-52.5c0-4.1-2.9-8.9-6.3-10.9C327.2,366.8,323.7,364.8,319.4,362.3
			z" />
		</g>
		</defs>

		<use xlink:href="#treehouse" class="cube-draw" x="0" y="0" />
		<use xlink:href="#treehouse" class="cube-dotted" x="150" y="0" />

	</svg>
</body>
</html>

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

@keyframes fill-it {
	100% {
		fill: red;
		fill-opacity: 0.5;
	}
}

/* --------------------------
  SVG Styles
--------------------------- */

.svg {
	display: block;
}

.cube-dotted {
	stroke: red;
	stroke-linecap: round;

	stroke-width: 2;
	stroke-dasharray: 0.2 3;
	stroke-dashoffset: 80;
	animation: offset 2.5s linear forwards;
}

.cube-draw {
	stroke: red;
	stroke-width: 2;
	stroke-dasharray: 810;
	stroke-dashoffset: 810;
	animation: offset 2.3s linear forwards, fill-it .8s 5s forwards;
}


  • 0






Similar Topics


Also tagged with one or more of these keywords: css, webdesign

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

As Featured On:

Microsoft Yahoo BBC MSN PC Magazine Washington Post HP