css 展开箭头SVG

uinbv5nw 于 12个月前发布在其他

关注(0)|答案(2)|浏览(80)

我在svg中创建了箭头，并在html中显示它。

<svg xmlns="http://www.w3.org/2000/svg" width="28" height="8" viewBox="0 0 28 18">
  <g id="Group1" data-name="Group1" transform="translate(28.321 -0.144) rotate(90)">
    <rect id="Rectangle_1107" data-name="Rectangle 1107" width="5" height="22" transform="translate(6.144 6.321)" fill="#000000"/>
    <path id="Pol_1" data-name="Pol 1" d="M9,0l9,14H0Z" transform="translate(0.144 0.321)" fill="#000000"/>
  </g>
</svg>

现在我需要以下行为：如果我把鼠标移到箭头上，箭头应该变长并改变颜色，如下所示：

因此，在默认的箭头是短和黑色，然后，悬停后，箭头应该是红色和更长。如何在css中实现？

css

来源：https://stackoverflow.com/questions/77278931/expand-arrow-svg

2条答案

按热度按时间

mfpqipee1#

您可以使用CSS过渡。SVG元素的transform属性可以使用CSS进行样式化。我只是将箭头的左边部分移到视图框外，然后在悬停时再移回来。
在这里，我还为stroke和fill使用了currentColor，以显示如何在上下文中定义颜色，就像父HTML元素一样。

svg {
  color: black;
  margin: 0 50px;
}

.arrow {
  transform: translateX(-20px);
  stroke: currentcolor;
  fill: currentcolor;
  transition: all 1s;
}

svg:hover {
  color: red;
}

svg:hover .arrow {
  transform: translateX(0px);
}

<svg xmlns="http://www.w3.org/2000/svg" height="100" viewBox="0 0 40 18">
   <defs>
    <marker id="marker01" viewBox="0 0 6 10" refX="2" refY="5"
      markerWidth="3" markerHeight="3" orient="auto-start-reverse">
      <path d="M 0 0 L 6 5 L 0 10 z" />
    </marker>
  </defs>
  <g class="arrow">
    <line y1="9" x2="32" y2="9" stroke-width="6" />
    <path transform="translate(30 0)" stroke="none" d="M 0 0 L 10 9 L 0 18 z" />
  </g>
</svg>

赞(0）回复(0）举报 12个月前

cnwbcb6i2#

选择hover。

svg:hover {
 width: 48px;
 fill: #FF0000;
}

您也可以使用transition来获得平滑效果。

svg {
 transition: all 0.4s ease;
}

赞(0）回复(0）举报 12个月前

我来回答

css 展开箭头SVG

2条答案

相关问题

热门标签

最新问答