CODEWITHSUNDEEP
csssvg
Kenzo
Kenzo

Reputation: 1837

Unable to scale the polygon on hover

I am trying to zoom (scale) the svg shape when i mouse over the polygon. The effect i am looking is that the shape scale in Z direction. Here is what i have tried.

.hex{
    cursor: pointer;
}

.hex:hover > * {
    transition: all 0.5s ease-in-out;
    transform: scaleZ(5);
}
<svg viewbox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg">
        <defs>
            <g id="pod">
              <polygon stroke="#ffffff" stroke-width=".5" points="6,-15 -6,-15 -12,0 -6,15 6,15 12,0" />
            </g>
        </defs>
    <g class="hex">
                <use xlink:href="#pod" x="50" y="41" fill="#96ddff"/>
                <image xlink:href="https://placeholder.pics/svg/12" x="44" y="35" width="12" height="12"/>
        </g>
</svg>

Upvotes: 2

Views: 210

Answers (2)

A Haworth
A Haworth

Reputation: 36512

Warning: this gives a 3D-based solution which worked for me (Edge on Windows10) but I've just learned that some browsers do not support that on svg content so as of November 2020 it is probably better to use a 2D solution.

To see a change on hover something has to change. Changing scaleZ does nothing because there is no Z dimension to scale - the polygon is flat

If you move it on hover - along the Z axis - with a positive distance towards the viewer then it will seem to get bigger (the polygon has only x and y dimensions, it is flat, so the scaleZ has no affect on its size in that sense).

Here is a snippet demonstrating the polygon getting larger on hover using the code in the initial question:

.hex{
    cursor: pointer;
    transform: translateZ(0px);/* the initial position */
}

.hex:hover {
  transition: all 0.5s ease-in-out;
  transform: perspective(500px) translateZ(50px);
}
<svg viewbox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg">
        <defs>
            <g id="pod">
              <polygon stroke="#ffffff" stroke-width=".5" points="6,-15 -6,-15 -12,0 -6,15 6,15 12,0" />
            </g>
        </defs>
    <g class="hex">
                <use xlink:href="#pod" x="50" y="41" fill="#96ddff"/>
                <image xlink:href="https://placeholder.pics/svg/12" x="44" y="35" width="12" height="12"/>
        </g>
</svg>

Upvotes: 0

Paul LeBeau
Paul LeBeau

Reputation: 101820

You can apply 3D transforms to <svg> elements that are on an HTML page, like you can for other (HTML) elements.

However 3D transforms on SVG content is not well supported by browsers as yet.

You don't exactly say what you are trying to achieve. But am I right in guessing that you are actually wanting to enlarge the shape, as if it is coming closer to the camera?

If so, then you can just scale it around its centre.

.hex {
  cursor: pointer;
  transition: all 0.5s ease-in-out;
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

.hex:hover {
  transform: scale(1.5);
}
<svg viewbox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <g id="pod">
      <polygon stroke="#ffffff" stroke-width=".5" points="6,-15 -6,-15 -12,0 -6,15 6,15 12,0" />
    </g>
  </defs>
  <g class="hex">
    <use xlink:href="#pod" x="50" y="41" fill="#96ddff"/>
    <image xlink:href="https://placeholder.pics/svg/12" x="44" y="35" width="12" height="12"/>
  </g>
</svg>

Upvotes: 5

Related Questions