How to make SVG larger on hover?
18,045
You can target the individual SVG element with class='section' using CSS and apply the required scale transform to it. Adding a transition to the element makes it grow smoothly.
The transform-origin setting is crucial to the whole piece as it specifies the point which should be used as the origin point for the transform.
.section:hover {
transform: scale(1.2);
}
.section {
transition: all 1s;
transform-origin: 50% 50%;
}
$(document).ready(function() {
$('.section').on('click', function(event) {
var sectionID = $(this).attr('id');
// Select the relevant popup window that has the same ID as the sectionID
var popupWindow = $('.popup-window.lot-' + sectionID);
$('.popup-window').not(popupWindow).hide();
var leftPos = $(this).position().left;
var topPos = $(this).position().top;
popupWindow.css('top', topPos - 200).css('left', leftPos - 100).show();
});
$('.close-button').click(function(event) {
$('.popup-window').hide();
});
});body {
position: relative;
margin: 0, padding: 0;
}
.section:hover {
fill: yellow;
}
.popup-window {
width: 400px;
height: 200px;
background: #accee2;
display: none;
position: absolute;
z-index: 100;
top: 0;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, .2);
border-radius: 6px;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
padding: 20px;
}
.section:hover {
transform: scale(1.2);
}
.section {
transition: all 1s;
transform-origin: 50% 50%;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="popup-window lot-1">
<a href="/for-sale/show/1">Lot Number: 1</a>
<h5>Section Size: 500</h5>
<button class="close-button">Close</button>
</div>
<div class="popup-window lot-2">
<a href="/for-sale/show/2">Lot Number: 2</a>
<h5>Section Size: 600</h5>
<button class="close-button">Close</button>
</div>
<div class="popup-window lot-3">
<a href="/for-sale/show/3">Lot Number: 3</a>
<h5>Section Size: 450</h5>
<button class="close-button">Close</button>
</div>
<?xml version="1.0" encoding="utf-8" ?>
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="800px" height="600px" viewBox="0 0 800 600" style="enable-background:new 0 0 800 600;" xml:space="preserve">
<style type="text/css">
.st0 {
fill: #C1C1C0;
}
.st1 {
fill: #0FB5CB;
}
.st2 {
fill: #46B649;
}
</style>
<g id="Layer_1">
<polygon class="st0" points="76.6,96.1 745.6,96.1 745.6,543.7 188.3,543.7 " />
</g>
<g id="landmarks-test">
<rect id="1" x="495.2" y="130.6" class="section" width="233.1" height="83.4" />
<rect id="2" x="495.2" y="235.4" class="section" width="233.1" height="95.9" />
<rect id="3" x="495.2" y="345.8" class="section" width="233.1" height="84.1" />
</g>
</svg>The effect that is seen in the website that you had linked is a bit more complex as there is a jerk at the end and it would require a cubic bezier for transition-timing-function (or) a keyframe animation.
transition-timing-function: cubic-bezier(.87,1,.6,.19);
$(document).ready(function() {
$('.section').on('click', function(event) {
var sectionID = $(this).attr('id');
// Select the relevant popup window that has the same ID as the sectionID
var popupWindow = $('.popup-window.lot-' + sectionID);
$('.popup-window').not(popupWindow).hide();
var leftPos = $(this).position().left;
var topPos = $(this).position().top;
popupWindow.css('top', topPos - 200).css('left', leftPos - 100).show();
});
$('.close-button').click(function(event) {
$('.popup-window').hide();
});
});body {
position: relative;
margin: 0, padding: 0;
}
.section:hover {
fill: yellow;
}
.popup-window {
width: 400px;
height: 200px;
background: #accee2;
display: none;
position: absolute;
z-index: 100;
top: 0;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, .2);
border-radius: 6px;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
padding: 20px;
}
.section:hover {
transform: scale(1.2);
}
.section {
transition: all 1s;
transition-timing-function: cubic-bezier(.87,1,.6,.19);
transform-origin: 50% 50%;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="popup-window lot-1">
<a href="/for-sale/show/1">Lot Number: 1</a>
<h5>Section Size: 500</h5>
<button class="close-button">Close</button>
</div>
<div class="popup-window lot-2">
<a href="/for-sale/show/2">Lot Number: 2</a>
<h5>Section Size: 600</h5>
<button class="close-button">Close</button>
</div>
<div class="popup-window lot-3">
<a href="/for-sale/show/3">Lot Number: 3</a>
<h5>Section Size: 450</h5>
<button class="close-button">Close</button>
</div>
<?xml version="1.0" encoding="utf-8" ?>
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="800px" height="600px" viewBox="0 0 800 600" style="enable-background:new 0 0 800 600;" xml:space="preserve">
<style type="text/css">
.st0 {
fill: #C1C1C0;
}
.st1 {
fill: #0FB5CB;
}
.st2 {
fill: #46B649;
}
</style>
<g id="Layer_1">
<polygon class="st0" points="76.6,96.1 745.6,96.1 745.6,543.7 188.3,543.7 " />
</g>
<g id="landmarks-test">
<rect id="1" x="495.2" y="130.6" class="section" width="233.1" height="83.4" />
<rect id="2" x="495.2" y="235.4" class="section" width="233.1" height="95.9" />
<rect id="3" x="495.2" y="345.8" class="section" width="233.1" height="84.1" />
</g>
</svg>Firefox doesn't seem to respect transform-origin setting when it is given a percentage value and so we would have to use specific pixel values for each child. The individual values are calculate as x position + width/2 and y position + height/2.
.section:nth-child(1){
transform-origin: 612px 172px;
}
.section:nth-child(2){
transform-origin: 612px 283px;
}
.section:nth-child(3){
transform-origin: 612px 388px;
}
$(document).ready(function() {
$('.section').on('click', function(event) {
var sectionID = $(this).attr('id');
// Select the relevant popup window that has the same ID as the sectionID
var popupWindow = $('.popup-window.lot-' + sectionID);
$('.popup-window').not(popupWindow).hide();
var leftPos = $(this).position().left;
var topPos = $(this).position().top;
popupWindow.css('top', topPos - 200).css('left', leftPos - 100).show();
});
$('.close-button').click(function(event) {
$('.popup-window').hide();
});
});body {
position: relative;
margin: 0, padding: 0;
}
.section:hover {
fill: yellow;
}
.popup-window {
width: 400px;
height: 200px;
background: #accee2;
display: none;
position: absolute;
z-index: 100;
top: 0;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, .2);
border-radius: 6px;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
padding: 20px;
}
.section:hover {
transform: scale(1.2);
}
.section {
transition: all 1s;
transition-timing-function: cubic-bezier(.87, 1, .6, .19);
}
.section:nth-child(1) {
transform-origin: 612px 172px;
}
.section:nth-child(2) {
transform-origin: 612px 283px;
}
.section:nth-child(3) {
transform-origin: 612px 388px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="popup-window lot-1">
<a href="/for-sale/show/1">Lot Number: 1</a>
<h5>Section Size: 500</h5>
<button class="close-button">Close</button>
</div>
<div class="popup-window lot-2">
<a href="/for-sale/show/2">Lot Number: 2</a>
<h5>Section Size: 600</h5>
<button class="close-button">Close</button>
</div>
<div class="popup-window lot-3">
<a href="/for-sale/show/3">Lot Number: 3</a>
<h5>Section Size: 450</h5>
<button class="close-button">Close</button>
</div>
<?xml version="1.0" encoding="utf-8" ?>
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="800px" height="600px" viewBox="0 0 800 600" style="enable-background:new 0 0 800 600;" xml:space="preserve">
<style type="text/css">
.st0 {
fill: #C1C1C0;
}
.st1 {
fill: #0FB5CB;
}
.st2 {
fill: #46B649;
}
</style>
<g id="Layer_1">
<polygon class="st0" points="76.6,96.1 745.6,96.1 745.6,543.7 188.3,543.7 " />
</g>
<g id="landmarks-test">
<rect id="1" x="495.2" y="130.6" class="section" width="233.1" height="83.4" />
<rect id="2" x="495.2" y="235.4" class="section" width="233.1" height="95.9" />
<rect id="3" x="495.2" y="345.8" class="section" width="233.1" height="84.1" />
</g>
</svg>Another thing to note is that CSS transforms on SVG elements don't work in IE as mentioned in this CodePen Article by Ana Tudor.
The matrix equivalent of this transform: scale(1.2) and the transform-origin setting would be the following: (Logic is explained here)
.section:nth-child(1):hover {
transform: matrix(1.2, 0, 0, 1.2, -122.4, -34.46);
}
.section:nth-child(2):hover {
transform: matrix(1.2, 0, 0, 1.2, -122.4, -56.67);
}
.section:nth-child(3):hover {
transform: matrix(1.2, 0, 0, 1.2, -122.4, -77.57);
}
$(document).ready(function() {
$('.section').on('click', function(event) {
var sectionID = $(this).attr('id');
// Select the relevant popup window that has the same ID as the sectionID
var popupWindow = $('.popup-window.lot-' + sectionID);
$('.popup-window').not(popupWindow).hide();
var leftPos = $(this).position().left;
var topPos = $(this).position().top;
popupWindow.css('top', topPos - 200).css('left', leftPos - 100).show();
});
$('.close-button').click(function(event) {
$('.popup-window').hide();
});
});body {
position: relative;
margin: 0, padding: 0;
}
.section:hover {
fill: yellow;
}
.popup-window {
width: 400px;
height: 200px;
background: #accee2;
display: none;
position: absolute;
z-index: 100;
top: 0;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, .2);
border-radius: 6px;
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
padding: 20px;
}
.section {
transition: all 1s;
transition-timing-function: cubic-bezier(.87, 1, .6, .19);
}
.section:nth-child(1):hover {
transform: matrix(1.2, 0, 0, 1.2, -122.4, -34.46);
}
.section:nth-child(2):hover {
transform: matrix(1.2, 0, 0, 1.2, -122.4, -56.67);
}
.section:nth-child(3):hover {
transform: matrix(1.2, 0, 0, 1.2, -122.4, -77.57);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="popup-window lot-1">
<a href="/for-sale/show/1">Lot Number: 1</a>
<h5>Section Size: 500</h5>
<button class="close-button">Close</button>
</div>
<div class="popup-window lot-2">
<a href="/for-sale/show/2">Lot Number: 2</a>
<h5>Section Size: 600</h5>
<button class="close-button">Close</button>
</div>
<div class="popup-window lot-3">
<a href="/for-sale/show/3">Lot Number: 3</a>
<h5>Section Size: 450</h5>
<button class="close-button">Close</button>
</div>
<?xml version="1.0" encoding="utf-8" ?>
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="800px" height="600px" viewBox="0 0 800 600" style="enable-background:new 0 0 800 600;" xml:space="preserve">
<style type="text/css">
.st0 {
fill: #C1C1C0;
}
.st1 {
fill: #0FB5CB;
}
.st2 {
fill: #46B649;
}
</style>
<g id="Layer_1">
<polygon class="st0" points="76.6,96.1 745.6,96.1 745.6,543.7 188.3,543.7 " />
</g>
<g id="landmarks-test">
<rect id="1" x="495.2" y="130.6" class="section" width="233.1" height="83.4" />
<rect id="2" x="495.2" y="235.4" class="section" width="233.1" height="95.9" />
<rect id="3" x="495.2" y="345.8" class="section" width="233.1" height="84.1" />
</g>
</svg>
Author by
ifusion
Updated on July 28, 2022Comments
-
ifusion almost 2 years
How do I make each SVG section larger on hover. I am trying to replicate the way this interactive map does it: http://goo.gl/orvyYI
I have created a basic interactive map here to test with:
<?xml version="1.0" encoding="utf-8"?> <!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="800px" height="600px" viewBox="0 0 800 600" style="enable-background:new 0 0 800 600;" xml:space="preserve"> <style type="text/css"> .st0{fill:#C1C1C0;} .st1{fill:#0FB5CB;} .st2{fill:#46B649;} </style> <g id="Layer_1"> <polygon class="st0" points="76.6,96.1 745.6,96.1 745.6,543.7 188.3,543.7 "/> </g> <g id="landmarks-test"> <rect id="1" x="495.2" y="130.6" class="section" width="233.1" height="83.4"/> <rect id="2" x="495.2" y="235.4" class="section" width="233.1" height="95.9"/> <rect id="3" x="495.2" y="345.8" class="section" width="233.1" height="84.1"/> </g> </svg>I have tried to implement the way they have done it using
transform: matrix()and also have triedtransform: scale()with no success.