在悬停时更改points属性的值 - SVG - 折线

时间：2018-04-17 18:24:40

标签： css svg

所以我有这个svg 元素，它基本上是一个多维数据集：

#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>

当我:hover超过#left polyline时，我想更改points 属性的值 。出于某种原因，我无法使用 CSS 进行编辑，因此认为points不是有效的CSS属性。

1 个答案:

答案 0 :(得分：0)

很遗憾没有 CSS 属性可以影响points 的polyline 属性元件

相反，您可以使用onmouseover 事件和setAttribute() 方法来执行此操作，例如：

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>

相关问题
最新问题