Question 263944 in CSS Question posted in
Some basic documentation can be found here.

Css – Expand arrow SVG

I have arrow created in svg and I display it in my 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>

now I need the following behavior: if I move the mouse over the arrow, the arrow should lengthen and change color, something like below:

enter image description here

So on default arrow is short and black and then, after hover, arrow should be red and longer. How can I achieve it in css?

Tags:

2

Answers


  1. 0

    Use the hover selector.

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

    You can also use transition to have a smooth effect.

    svg {
 transition: all 0.4s ease;
}
    Login or Signup to reply.
  2. 0

    You can use a CSS transition. The transform property of a SVG element can be styled using CSS. I am just moving the left part of the arrow outside the view box and back again on hover.

    Here I also use the currentColor for both stroke and fill to show how the color could be defined in the context, like a parent HTML element.

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search