SVG Dupliceren.

Status
Niet open voor verdere reacties.

Wouter1993

Gebruiker
Lid geworden
16 mrt 2015
Berichten
47
Hallo,

Voor een schoolproject willen we een SVG effect toevoegen in onze html/css, namelijk een soort "sparkle-effect".
De svg werkt prima, maar nu willen we deze dupliceren, zodat je om en om de sparkle te zien krijgt op verschillende locaties.

Zelf hebben we geen ervaring met SVG-effecten en hebben we dit effect ook op internet gevonden.

De html-code:
HTML:
<svg width="100" height="100" viewBox="0 0 100 100">
  <g class="group" opacity="0.8">
    <g class="large">
      <path id="large" d="M41.25,40 L42.5,10 L43.75,40 L45, 41.25 L75,42.5 L45,43.75
    					  L43.75,45 L42.5,75 L41.25,45 L40,43.75 L10,42.5 L40,41.25z " fill="white" />
    </g>
    <g class="large-2" transform="rotate(45)">
      <use xlink:href="#large" />
    </g>
    <g class="small">
      <path id="small" d="M41.25,40 L42.5,25 L43.75,40 L45,41.25 L60,42.5 L45,43.75
            		      L43.75,45 L42.5,60 L41.25,45 L40,43.75 L25,42.5 L40,41.25z" fill="white" />
    </g>
  </g>
</svg>

De CSS Code:
Code:
/* Sparkle */
svg {
	position: absolute;
	-webkit-transform: translate(135%, 430%);
	transform: translate(135%, 430%);
}
.group {
    -webkit-transform: translate(42.5px,42.5px);
    -moz-transform: translate(42.5px,42.5px);
    transform: translate(42.5px, 42.5px);
}
path {
    -webkit-transform: translate(-42.50px,-42.50px);
    -moz-transform: translate(-42.50px,-42.50px);
    transform: translate(-42.50px,-42.50px);
}
.large {
	-webkit-animation: large 2.5s infinite;
	-moz-animation: large 2.5s infinite;
}
.large-2 {
	-webkit-animation: large-2 2.5s infinite;
	-moz-animation: large-2 2.5s infinite;
}
.small {
	-webkit-animation: small 2.5s infinite;
	-moz-animation: small 2.5s infinite;
}

@-webkit-keyframes large {
	0% {
		opacity: 0;
		-webkit-transform: rotate(0deg) scale(0);
		transform: rotate(0deg) scale(0);
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		-webkit-transform: rotate(360deg) scale(1.5);
		transform: rotate(360deg) scale(1.5);
	}
}
@-moz-keyframes large {
	0% {
		opacity: 0;
		transform: rotate(0deg) scale(0);
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		transform: rotate(360deg) scale(1.5);
	}
}
@-webkit-keyframes large-2 {
	0% {
		opacity: 0;
		-webkit-transform: rotate(45deg) scale(0);
		transform: rotate(45deg) scale(0);
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		-webkit-transform: rotate(405deg) scale(1.1);
		transform: rotate(405deg) scale(1.1);
	}
}
@-moz-keyframes large-2 {
	0% {
		opacity: 0;
		transform: rotate(45deg) scale(0);
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		transform: rotate(405deg) scale(1.1);
	}
}
@-webkit-keyframes small {
	0% {
		opacity: 0;
		-webkit-transform: rotate(0deg) scale(0);
		transform: rotate(0deg) scale(0);
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		-webkit-transform: rotate(-360deg) scale(1);
		transform: rotate(-360deg) scale(1.5);
	}
}
@-moz-keyframes small {
	0% {
		opacity: 0;
		transform: rotate(0deg) scale(0);
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		transform: rotate(-360deg) scale(1.5);
	}
}

Hopelijk kan iemand ons helpen met dit probleem!
Alvast bedankt!

Groeten,
Leon & Wouter.
 
de SVG is een "image" met een vaste grootte. Als je de image op meerdere plaatsen wil gebruiken moet je die ook op meerdere plaatsen toevoegen. Het is geen "overlay" waar je de image op een random plaats in je document kan zetten, net zoals je een gifje niet random over andere elementen kan plaatsen. Mogelijk zou je een iframe kunnen gebruiken en die verplaatsen naar verschillende locaties op je pagina, maar het is niet helemaal duidelijk hoe en wat jullie precies zoeken.
 
de SVG is een "image" met een vaste grootte. Als je de image op meerdere plaatsen wil gebruiken moet je die ook op meerdere plaatsen toevoegen. Het is geen "overlay" waar je de image op een random plaats in je document kan zetten, net zoals je een gifje niet random over andere elementen kan plaatsen. Mogelijk zou je een iframe kunnen gebruiken en die verplaatsen naar verschillende locaties op je pagina, maar het is niet helemaal duidelijk hoe en wat jullie precies zoeken.

Bedankt voor uw reactie!
We hebben ondertussen ook inderdaad gevonden dat we er meerdere moeten toevoegen dan. We gaan proberen om met iframe dit probleem op te lossen!

Groeten,
Leon & Wouter
 
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan