Jump to content

Welcome to Geeks to Go - Register now for FREE

Need help with your computer or device? Want to learn new tech skills? You're in the right place!
Geeks to Go is a friendly community of tech experts who can solve any problem you have. Just create a free account and post your question. Our volunteers will reply quickly and guide you through the steps. Don't let tech troubles stop you. Join Geeks to Go now and get the support you need!

How it Works Create Account
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
  • 8,087 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

1 user(s) are reading this topic

0 members, 1 guests, 0 anonymous users

As Featured On:

Microsoft Yahoo BBC MSN PC Magazine Washington Post HP