使用 CSS 或 AngularJS 的 SVG 路径元素悬停缩放

Posted 2023-03-06

【中文标题】使用 CSS 或 AngularJS 的 SVG 路径元素悬停缩放

【英文标题】：SVG Path element hover zoom using CSS or AngularJS

【发布时间】：2015-12-17 07:18:22

【问题描述】：

我正在尝试使用 CSS 放大 svg 图像的路径元素。但结果很奇怪，因为元素正在放大，但也改变了它们的 x 和位置。我想要使​​用 CSS 或 AngularJS 的悬停缩放效果。我试过 transform: scale(1.2); css 和 transform: scale(1.5) translate 调整位置。但是，这对每个路径元素的工作方式不同。这是 svg 图像和 css 示例代码。任何帮助将不胜感激。

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
              viewBox="0 0 800 600" enable-background="new 0 0 800 600" xml:space="preserve">
        <path fill-rule="evenodd" clip-rule="evenodd" fill="#A91E2A" d="M141.033,267.116c2.7,0,4.932,0,7.453,0
            c-0.171,3.039-0.269,5.821-0.494,8.592c-0.671,8.279-2.028,16.491-1.013,24.884c0.869,7.181,1.072,14.441,1.63,21.662
            c0.635,8.208,0.956,16.466,2.15,24.595c0.761,5.179,2.828,10.172,4.364,15.231c4.396,14.479,8.891,28.927,13.188,43.434
            c1.32,4.457,4.339,7.779,6.891,11.388c7.908,11.185,16.188,22.108,23.995,33.362c4.275,6.162,9.125,11.387,15.521,15.493
            c14.389,9.237,28.411,19.046,42.737,28.383c2.538,1.654,5.775,2.347,8.778,3.157c17.543,4.733,35.112,9.371,52.674,14.031
            c0.477,0.127,0.982,0.189,1.477,0.203c6.859,0.186,13.717,0.495,20.577,0.513c71.419,0.194,142.837,0.379,214.257,0.454
            c8.848,0.01,17.742-0.193,26.529-1.118c5.685-0.599,11.227-2.636,16.807-4.123c14.133-3.763,28.309-7.385,42.336-11.508
            c3.619-1.063,6.877-3.587,10.096-5.745c14.481-9.709,28.979-19.398,43.243-29.421c2.735-1.923,4.56-5.224,6.597-8.039
            c10.066-13.92,20.07-27.884,30.076-41.848c1.129-1.576,2.186-2.515,4.22-1.156c1.265,0.844,2.87,1.18,4.718,1.897
            c-1.996,2.938-3.779,5.686-5.686,8.345c-8.758,12.222-17.984,24.139-26.181,36.727c-5.365,8.237-13.03,13.219-20.78,18.445
            c-12.658,8.539-25.146,17.341-37.959,25.638c-3.35,2.169-7.564,3.168-11.511,4.221c-16.989,4.53-34.011,8.944-51.062,13.234
            c-2.941,0.739-6.082,0.912-9.135,0.941c-25.159,0.245-50.32,0.513-75.48,0.548c-53.898,0.075-107.796,0.056-161.694-0.035
            c-7.924-0.014-15.912-0.121-23.752-1.115c-6.509-0.826-12.87-2.927-19.251-4.63c-13.954-3.727-27.93-7.386-41.776-11.479
            c-3.206-0.948-5.997-3.431-8.863-5.376c-15.107-10.253-30.214-20.508-45.215-30.914c-1.837-1.274-3.172-3.37-4.514-5.246
            c-11.111-15.534-22.303-31.015-33.133-46.742c-2.223-3.228-3.245-7.361-4.458-11.191c-3.391-10.71-6.577-21.484-9.875-32.225
            c-2.037-6.636-4.19-13.237-6.154-19.896c-0.51-1.729-0.59-3.606-0.714-5.426c-0.551-8.064-0.938-16.141-1.591-24.195
            c-0.692-8.528-1.747-17.027-2.378-25.559c-0.232-3.132,0.227-6.325,0.493-9.479c0.419-4.968,0.939-9.928,1.425-14.889
            C140.73,269.751,140.896,268.367,141.033,267.116z"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="#AFAAAA" d="M496.279,265.871c0,8.713,0,17.243,0,25.971
            c2.838,0,5.492,0,8.318,0c0,1.388,0,2.577,0,3.979c-2.74,0-5.396,0-8.321,0c0,8.794,0,17.388,0,26.119c-30.287,0-60.302,0-90.591,0
            c0-8.54,0-17.133,0-26.029c-2.975,0-5.688,0-8.537,0c0-1.436,0-2.57,0-3.989c2.723,0,5.443,0,8.348,0c0-8.808,0-17.338,0-26.05
            C435.762,265.871,465.835,265.871,496.279,265.871z M450.941,270.326c-0.129-0.076-0.257-0.153-0.386-0.229
            c-0.067,0.31-0.192,0.618-0.194,0.928c-0.018,2.687-0.012,5.373-0.016,8.059c-0.004,2.687-0.018,5.373-0.018,8.059
            c0,2.769-0.227,5.565,0.092,8.297c0.264,2.253-0.734,4.3-0.227,6.671c0.635,2.97,0.152,6.179,0.152,9.285c0,2.053,0,4.106,0,6.159
            c0.199-0.005,0.398-0.01,0.598-0.016c0-0.658,0-1.317,0-1.976c0-4.365-0.051-8.731,0.042-13.095c0.019-0.829,0.887-1.66,0.852-2.468
            c-0.051-1.151-0.843-2.279-0.853-3.423C450.907,287.828,450.941,279.077,450.941,270.326z M399.583,293.463
            c-0.007,0.092-0.013,0.184-0.02,0.275c3.827,0,7.653,0,11.48,0c-0.001-0.092-0.003-0.184-0.004-0.275
            C407.222,293.463,403.402,293.463,399.583,293.463z"/>

CSS

path:hover
        transform: scale(1.2);
        -webkit-transform: scale(1.2);
    

【参考方案1】：

我回答了一个关于使用 CSS 进行缩放的类似问题，我认为它可能对您有所帮助：

Framework7: How to get pinch to zoom on page-content with hammer.js?

即使不是 SVG，我认为您也可以很容易地查看。