主页 / 问题 / 1480559
Accepted
Дмитрий Варзанов
Asked:2022-12-23 22:59:30 +0000 UTC2022-12-23 22:59:30 +0000 UTC

从一个图标制作 2 个图标

  • 772

<svg viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
  <path fill="#5181b8" d="M 18,0.5 C 8.3348958,0.5 0.5,8.334896 0.5,18 0.5,27.665105 8.3348958,35.500001 18,35.500001 27.665104,35.500001 35.5,27.665105 35.5,18 35.5,8.334896 27.665104,0.5 18,0.5 Z m 6.730208,19.744011 c 0,0 1.547656,1.527604 1.928646,2.236719 0.01094,0.01458 0.01641,0.02917 0.02005,0.03646 0.154948,0.260677 0.191406,0.463021 0.114843,0.614323 -0.127604,0.251562 -0.565104,0.375521 -0.714583,0.386458 h -2.734375 c -0.189583,0 -0.586979,-0.04922 -1.068229,-0.380989 -0.370052,-0.258855 -0.734636,-0.683594 -1.090104,-1.097396 -0.530469,-0.616146 -0.989844,-1.148438 -1.452865,-1.148438 a 0.55598957,0.55598959 0 0 0 -0.173177,0.02734 c -0.35,0.113021 -0.798437,0.6125 -0.798437,1.943229 0,0.415625 -0.328125,0.654427 -0.559636,0.654427 H 16.95 c -0.426562,0 -2.648698,-0.149479 -4.617448,-2.225781 -2.4098959,-2.542969 -4.5791666,-7.64349 -4.5973958,-7.690886 -0.1367188,-0.329948 0.1458333,-0.50677 0.4539063,-0.50677 h 2.7617185 c 0.36823,0 0.488542,0.224218 0.572396,0.422916 0.09844,0.231511 0.459375,1.152084 1.051823,2.1875 0.960677,1.688021 1.549479,2.373438 2.021615,2.373438 A 0.54687499,0.54687501 0 0 0 14.85,18.010938 c 0.616146,-0.342709 0.501302,-2.539323 0.473959,-2.995052 0,-0.08568 -0.0018,-0.982552 -0.317188,-1.412761 -0.226042,-0.311719 -0.610677,-0.430208 -0.84401,-0.473958 a 1.0026042,1.0026042 0 0 1 0.36276,-0.308073 c 0.422917,-0.211458 1.184896,-0.242448 1.941406,-0.242448 h 0.421094 c 0.820313,0.01094 1.031771,0.0638 1.328905,0.138542 0.601563,0.14401 0.614323,0.532291 0.561459,1.861198 -0.01641,0.377343 -0.03281,0.803906 -0.03281,1.307031 0,0.109375 -0.0055,0.226042 -0.0055,0.35 -0.01823,0.676302 -0.0401,1.44375 0.4375,1.759115 a 0.39375,0.39375001 0 0 0 0.207812,0.06016 c 0.165885,0 0.665365,0 2.017969,-2.320573 a 17.715103,17.715104 0 0 0 1.084635,-2.322396 c 0.02734,-0.0474 0.107552,-0.193229 0.202344,-0.24974 a 0.48489583,0.48489584 0 0 1 0.226042,-0.05286 h 3.246614 c 0.353646,0 0.596094,0.05286 0.641667,0.189583 0.08021,0.216927 -0.01458,0.878646 -1.496615,2.885677 l -0.661718,0.873177 c -1.34349,1.760938 -1.34349,1.850261 0.08385,3.186459 z">
</path></svg>

也许让'Vk'成为一个单独的对象？为了调整大小，缩放，然后恢复到原来的样子。

如何使用 Inkscape 编辑器做到这一点？

svg

1 个回答

  1. Best Answer

    .icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #5181b8;
}

.icon-vk {
  transition: 0.2s ease-in;
}

.icon:hover .icon-vk {
  transform: scale(1.2);
}
    <div class="icon">
  <svg class="icon-vk" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"><path fill="#fff" d="M26.7 22.5c.2.3.2.5.1.6-.1.2-.6.4-.7.4h-2.7c-.2 0-.6-.1-1.1-.4-.4-.3-.7-.7-1.1-1.1-.5-.6-1-1.2-1.5-1.2h-.2c-.4.1-.8.6-.8 1.9 0 .4-.3.7-.6.7H17c-.4 0-2.7-.1-4.6-2.2-2.4-2.5-4.6-7.6-4.6-7.7-.1-.3.1-.5.4-.5H11c.4 0 .5.2.6.4.1.2.5 1.1 1.1 2.2 1 1.7 1.5 2.4 2 2.4.1 0 .2 0 .2-.1.6-.3.5-2.5.5-3 0-.1 0-1-.3-1.4-.2-.3-.6-.4-.9-.5.1-.1.2-.2.4-.3.4-.2 1.2-.2 1.9-.2h.4c.8 0 1 .1 1.3.1.6.1.6.5.6 1.9v1.6c0 .7 0 1.4.4 1.8.1 0 .1.1.2.1.2 0 .7 0 2-2.3.4-.7.8-1.5 1.1-2.3 0-.1.1-.2.2-.2s.1-.1.2-.1h3.2c.4 0 .6.1.6.2.1.2 0 .9-1.5 2.9l-.7.9c-1.4 1.8-1.4 1.9.1 3.2.1-.1 1.7 1.5 2.1 2.2z"/></svg>
</div>

    你只需要重做它... 设计师工作的 2 分钟。

    • 2

相关问题