Usar y reusar todo en SVG … ¡Incluso animaciones!

Vista explotada de dos cubos Rubik
Cubos animados

Parte 1: El elemento SVG <use>

  1. Identificá la parte del código que querés clonar
  2. Agregale un ID a esa parte
  3. Linkeala dentro del tag<use> de esta forma: <use xlink:href="#id"/>

Veamos un ejemplo muy conveniente

<svg viewBox="-130 -20 300 100">   
<g id="cubo">
<rect width="21" height="24" transform="skewY(30)"/>
<rect width="21" height="24" transform="skewY(-30) translate(21 24.3)"/>
<rect width="21" height="21" transform="scale(1.41,.81) rotate(45) translate(0 -21)"/>
</g>
</svg>
Cubo con colores de relleno y borde: https://codepen.io/marianab/pen/XWWQbYP
<use xlink:href="#cubo" x="142" y="124"/> 
<use xlink:href="#cubo" x="100" y="124"/>
<!-- ... -->
Primer cubo grande completo: https://codepen.io/marianab/pen/wvvZXqG

Parte 2: Usando variables CSS para aplicar diferentes estilos al gráfico reutilizado

<rect fill="#00affa" stroke="#0079ad" />
<rect fill="var(--colorPrincipal)" stroke="var(--colorBorde)" />
.cubo-azul {   
--colorPrincipal: #009CDE;
--colorBorde: #0079ad;
--colorClaro: #00affa;
--colorOscuro: #008bc7;
}
.cubo-rosa {
--colorPrincipal: #de0063;
--colorBorde: #ad004e;
--colorClaro: #fa0070;
--colorOscuro: #c7005a;
}
Cubo duplicado con diferentes estilos: https://codepen.io/marianab/pen/gOOJQmw

Parte 3: Reusando animaciones

Código final: https://codepen.io/marianab/pen/KKKYdxE
@keyframes moveX {   
to { transform: translateX(-35px); }
}
@keyframes moveX {   
to { transform: translateX(var(--translate, 35px)); }
}
.m-izquierda, .m-derecha {    
animation: 2s moveX alternate infinite;
}
.m-izquierda { --translate: -50px; }
svg:hover .m-izquierda {
animation: 2s moveX alternate infinite;
}
.m-izquierda {   
animation: 2s moveX alternate infinite paused;
}
svg:hover * {
animation-play-state: running;
}

Para terminar…

--

--

I write about design + code + illustration and SVG. Head of Branding @ Leniolabs.com • holasvg.com

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store