All geek questions in one place

How to make SVG larger on hover?

How to make each SVG section larger on hover. I am trying to reproduce the way this interactive map does this: http://goo.gl/orvyYI

I created a basic interactive map here to test:

<?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 tried to implement how they did it using transform: matrix() , and also tried transform: scale() without success.

CODEPEN DEMO

+5
source share
1 answer

You can target a single SVG element using class='section' using CSS and apply the required scalable conversion to it. Adding a transition element to the element makes it smooth.

The transform-origin parameter is critical for the entire part, as it indicates the point that should be used as the starting point for the transformation.

 .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 observed on the website you linked is a bit more complicated as there is a jerk at the end and a cubic bezier is required for the transition-timing-function (or) of the animation keyframe.

 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>

It seems that Firefox does not comply with the transform-origin parameter when it is given a percentage value, so we will need to use specific pixel values ​​for each child element. Individual values ​​are calculated 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 transformations on SVG elements do not work in IE, as described in this Ana Tudor CodePen article .

the matrix equivalent of this transform: scale(1.2) parameter transform: scale(1.2) and transform-origin will be as follows: ( 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>
+14
source

Source: https://habr.com/ru/post/1234907/

More articles:


All Articles