Menu
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 tried transform: scale() with no success.
CODEPEN DEMO
602
To resize an SVG file, upload your vector or drag n drop it to the editor. Next, click on the SVG to activate the round pointers on its edges. Once activated, drag the corners to enlarge or scale down the vector file.
Any height or width you set for the SVG with CSS will override the height and width attributes on the <svg> . So a rule like svg {width: 100%; height: auto;} will cancel out the dimensions and aspect ratio you set in the code, and give you the default height for inline SVG.
What you can do however is to set this :hover on the parent . slick-next element and change the content there. To avoid having to store two svg files on your servers with only the fill that will change, you can use of a hack demonstrated by Lea Verou, which exploits the :target pseudo-class. More info on this here.
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
