Changing values of the points attribute on hover - SVG - polyline - css

Question

So I have this svg element, which is basically a cube:
#rect1 {fill: url(#Gradient1)}
.stop1 {stop-color: black}
.stop2 {stop-color: #5961FF}
#cube {
transform-origin: 50% 30%;
transform: scale(0.5);
transform: translate(-220px, 0);
}
#cube-text {
font-size: 2.5em;
fill: red;
transform: rotate(-30,300, 10);
font-family: 'VT323', monospace;
text-shadow:
-2px 4px 2px rgba(254,254,254,0.5),
-4px 4px 3px rgba(255,255,255,0.4),
-6px 4px 2px rgba(22,44,65,0.62),
-8px 4px 1px rgba(22,44,65,1);
opacity: 1;
}
#top {
transform: translate(0, -300px);
animation: top 0.5s forwards ease-out 1s;
opacity: 0;
fill: url(#blue);
z-index: 99;
}
#right {
transform: translate(300px, 0);
animation: right 0.5s forwards ease-out 2s;
opacity: 0;
fill: #152B40;
z-index: 99;
}
#left {
transform: translate(-300px, 0);
animation: left 0.5s forwards ease-out 3s;
opacity: 0;
fill: url(#blue-shade);
z-index: 99;
}
#left:hover {
points: "500, 100";
}
#keyframes top {
from {
transform: translate(0, -300px);
opacity: 0;
}
to {
transform: translate(0, 0);
opacity: 1;
}
}
#keyframes right {
from {
transform: translate(300px, 0);
opacity: 0;
}
to {
transform: translate(0, 0);
opacity: 1;
}
}
#keyframes left {
from {
transform: translate(-300px, 0);
opacity: 0;
}
to {
transform: translate(0, 0);
opacity: 1;
}
}
#keyframes rotate {
from {
transform: rotate(0);
opacity: 0;
}
to {
transform: rotate(360deg);
opacity: 1;
}
}
#keyframes scale-spin {
from {
transform: scale(1);
}
to {
transform: scale(0);
}
}
<link href="https://fonts.googleapis.com/css?family=Baloo+Tamma|Black+Ops+One|Coda|Codystar|Fugaz+One|IBM+Plex+Mono|Overpass+Mono|PT+Mono|Racing+Sans+One|VT323" rel="stylesheet">
<svg id="cube" height="1000" width="1000">
<defs>
<linearGradient id="blue" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#152B40"/>
<stop offset="50%" stop-color="#152B40"/>
</linearGradient>
<linearGradient id="blue-shade" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#152B40"/>
<stop offset="100%" stop-color="#4A9BE5"/>
</linearGradient>
</defs>
<text id="cube-text" x="250" y="560">
<tspan x="414" y="320">Random Text</tspan>
</text>
<polyline id="top" points="500,100 250,150 500,220 750,150 500,100" style="fill: #152B40; stroke: ; stroke-width: "/>
<polyline id="right" points="500,220 500,550 750,400 750,150 500,220" style="fill: #152B40; stroke: #152B40; stroke-width: " />
<polyline id="left" points="500,550 250,400 250,150 500,220" style="fill: ; stroke: #152B40; stroke-width: 2" />
</svg>
When I :hover over the #left polyline, I want to change the values of the points attribute. For some reason I cannot edit that with CSS and therefore think points isn't a valid CSS property.

Answer 1

Unfortunately there is no CSS property that can effect the points attribute of the polyline element.
Instead, you can do it with the onmouseover event and setAttribute() method, e.g.:
function changeLeft() {
var left = document.getElementById('left');
left.setAttribute('points','510,560 260,410 260,160 510,230');
}
#rect1 {fill: url(#Gradient1)}
.stop1 {stop-color: black}
.stop2 {stop-color: #5961FF}
#cube {
transform-origin: 50% 30%;
transform: scale(0.5);
transform: translate(-220px, 0);
}
#cube-text {
font-size: 2.5em;
fill: red;
transform: rotate(-30, 300, 10);
font-family: 'VT323', monospace;
text-shadow:
-2px 4px 2px rgba(254,254,254,0.5),
-4px 4px 3px rgba(255,255,255,0.4),
-6px 4px 2px rgba(22,44,65,0.62),
-8px 4px 1px rgba(22,44,65,1);
opacity: 1;
}
#top {
transform: translate(0, -300px);
animation: top 0.5s forwards ease-out 1s;
opacity: 0;
fill: url(#blue);
z-index: 99;
}
#right {
transform: translate(300px, 0);
animation: right 0.5s forwards ease-out 2s;
opacity: 0;
fill: #152B40;
z-index: 99;
}
#left {
transform: translate(-300px, 0);
animation: left 0.5s forwards ease-out 3s;
opacity: 0;
fill: url(#blue-shade);
z-index: 99;
}
/*
#left:hover {
points: "500, 100";
}
*/
#keyframes top {
from {
transform: translate(0, -300px);
opacity: 0;
}
to {
transform: translate(0, 0);
opacity: 1;
}
}
#keyframes right {
from {
transform: translate(300px, 0);
opacity: 0;
}
to {
transform: translate(0, 0);
opacity: 1;
}
}
#keyframes left {
from {
transform: translate(-300px, 0);
opacity: 0;
}
to {
transform: translate(0, 0);
opacity: 1;
}
}
#keyframes rotate {
from {
transform: rotate(0);
opacity: 0;
}
to {
transform: rotate(360deg);
opacity: 1;
}
}
#keyframes scale-spin {
from {
transform: scale(1);
}
to {
transform: scale(0);
}
}
<link href="https://fonts.googleapis.com/css?family=Baloo+Tamma|Black+Ops+One|Coda|Codystar|Fugaz+One|IBM+Plex+Mono|Overpass+Mono|PT+Mono|Racing+Sans+One|VT323" rel="stylesheet">
<svg id="cube" height="1000" width="1000">
<defs>
<linearGradient id="blue" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#152B40"/>
<stop offset="50%" stop-color="#152B40"/>
</linearGradient>
<linearGradient id="blue-shade" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#152B40"/>
<stop offset="100%" stop-color="#4A9BE5"/>
</linearGradient>
</defs>
<text id="cube-text" x="250" y="560">
<tspan x="414" y="320">Random Text</tspan>
</text>
<polyline id="top" points="500,100 250,150 500,220 750,150 500,100" style="fill: #152B40; stroke: ; stroke-width: " />
<polyline id="right" points="500,220 500,550 750,400 750,150 500,220" style="fill: #152B40; stroke: #152B40; stroke-width: " />
<polyline id="left" points="500,550 250,400 250,150 500,220" style="fill: ; stroke: #152B40; stroke-width: 2" onmouseover="changeLeft();" />
</svg>