2015-09-20 51 views
2

我想要使用CSS放大svg圖像的路徑元素。但結果很奇怪,因爲元素正在縮放,但也改變了它們的x和位置。我想使用CSS或AngularJS懸停縮放效果。我嘗試過transform:scale(1.2);的CSS和變換:縮放(1.5)翻譯來調整位置。但是,這對每個路徑元素都有不同的作用。這裏是svg圖像和css示例代碼。任何幫助,將不勝感激。使用CSS或AngularJS的SVG路徑元素懸停縮放

<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" 
      width="800px" height="600px" 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); 
    } 

回答