html - 如何在悬停时使 SVG 变大？

标签 html css svg css-transforms

如何在悬停时使每个 SVG 部分变大。我正在尝试复制此交互式 map 的执行方式:http://goo.gl/orvyYI

我在这里创建了一个基本的交互式 map 来测试:

<?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>

我已经尝试使用 transform: matrix() 实现他们完成它的方式，也尝试过 transform: scale() 但没有成功。

CODEPEN DEMO

最佳答案

您可以使用 CSS 以 class='section' 定位单个 SVG 元素，并对其应用所需的比例转换。向元素添加 transition 使其平滑增长。

transform-origin 设置对整个作品至关重要，因为它指定了应用作变换原点的点。

.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>

在您链接的网站上看到的效果有点复杂，因为最后有一个抖动，它需要一个立方贝塞尔曲线用于 transition-timing-function(或) 一个关键帧动画。

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 在给定百分比值时似乎不遵守 transform-origin 设置，因此我们必须为每个子项使用特定的像素值。各个值计算为 x 位置 + width/2 和 y 位置 + 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>

另一件需要注意的事情是，SVG 元素上的 CSS 转换在 IE 中不起作用，如 this CodePen Article by Ana Tudor 中所述。 .

此 transform: scale(1.2) 和 transform-origin 设置的 matrix 等效项如下:( 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>

关于html - 如何在悬停时使 SVG 变大？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33449452/

上一篇：Javascript:单击主体中除其中一个元素之外的任何位置

下一篇：html - 是否可以让所有 <a> 标签在新窗口/标签中打开？

相关文章：

css - Outlook 上的灵活图像

css - 背景百分比的 CSS 计算是如何工作的？

javascript - 仅在检查器上修改 HTML 后才会渲染 SVG 折线

具有清晰边缘的 SVG 图像元素

html - 位置堆叠 Font Awesome 图标

javascript - 通过RequestDispatcher调用html页面获取请求参数

html - 从 Bootstrap 元素对齐文本字段和文本区域

css - 如何在 Firefox 上制作带有可见溢出的 SVG 笔画？

html - 如何降低背景渐变的高度？

javascript - 如何隐藏 jQuery Mobile anchor 按钮

©2024 IT工具网  联系我们