CODEWITHSUNDEEP
htmlcsssvg
Tony White
Tony White

Reputation: 197

SVG scaling from center point

I have this piece of code, and I wanted the SVG objects to expand upon hover. I looked up a solution to make the SVG object expand from the center of the shape, but it's unresponsive. My other attempt was to simply transform it using a:hover and using CSS transformations, but as you might expect, it scales, but also moves away from the canvas.

a {
  display: block;
  width: 1500px;
  height: 850px;
  transition: all .2s;
  font-size: 0;
  position: absolute;
  background: black;
}

a:hover {
  background: gray;
  /*Attempt to scale using CSS, but there was a failure
  transform: scale(1.5,1.5);
  -ms-transform: scale(1.5,1.5);
  -webkit-transform: scale(1.5,1.5);*/
}

svg {
  display: block;
  height: 0;
}

div#navPanel {
  margin-top: 50px;
  margin-left: 10vw;
}
<head>
  <svg>
    <defs>
      <clipPath id="c1">
        <path
        d="
        M 10, 0
        L 200, 80
        L 300, 60
        Z
        "/>
      </clipPath>
    </defs>
    <use xlink:href="#c1" transform="translate(-50,-50) scale (1.5)"/>
  </svg>
</head>
<body>
  <div id="navPanel">
    <a href="#1" class="clipPath1" style="clip-path: url(#c1)">Click me...</a>
  </div>
</body>

Upvotes: 1

Views: 2115

Answers (2)

Paul LeBeau
Paul LeBeau

Reputation: 101820

You've made it hard for yourself by using clip paths. Your problem is that the clip Paths have absolute coordinates. When you scale the <a> element up, you can't tell anything has happened because the clip path has stayed the same size.

You need to scale the clip path up. Which you can only do with Javascript. See below.

var item = document.getElementById("item1");

item.addEventListener("mouseover", function(evt) {
  document.querySelector("#c1 path").setAttribute("transform",
    "translate(155,40) scale(1.5) translate(-155,-40)");
});

item.addEventListener("mouseout", function(evt) {
  document.querySelector("#c1 path").removeAttribute("transform");
});
a {
  display: block;
  width: 1500px;
  height: 850px;
  transition: all .2s;
  font-size: 0;
  position: absolute;
  background: black;
}

a:hover {
  background: gray;
}

svg {
  display: block;
  height: 0;
}

div#navPanel {
  margin-top: 50px;
  margin-left: 10vw;
}
<head>
  <svg>
    <defs>
      <clipPath id="c1">
        <path
        d="
        M 10, 0
        L 200, 80
        L 300, 60
        Z
        " />
      </clipPath>
    </defs>
  </svg>
</head>
<body>
  <div id="navPanel">
    <a id="item1" href="#1" class="clipPath1" style="clip-path: url(#c1)">Click me...</a>
  </div>
</body>

The enlarged clip path is itself being clipped by the edge of the <a> element. You could fix that by moving the clip path away from the edge. Ie increase the coordinate values in the clip path.

Upvotes: 0

Noopur Dabhi
Noopur Dabhi

Reputation: 1927

The issue is in width and height of the <a> tag

Here is working fiddle : https://jsfiddle.net/0we13sx9/2/

CSS

a {
  display: block;
  width: 300px;
  height: 100px;
  transition: all .2s;
  font-size: 0;
  position: relative;
  background: black;
}

a:hover {
  background: gray;
  /* Attempt to scale using CSS, but there was a failure */
  transform: scale(1.2,1.2);
  -ms-transform: scale(1.2,1.2);
  -webkit-transform: scale(1.2,1.2);
}

svg {
  display: block;
  height: 0;
}

div#navPanel {
  margin-top: 50px;
  margin-left: 10vw;
}

Upvotes: 1

Related Questions