android 删除视图框小数并将SVG路径缩放到所需的宽度和高度

ql3eal8s  于 2023-01-07  发布在  Android
关注(0)|答案(1)|浏览(141)

我有一个svg文件,有十进制数的视图框值,我想删除十进制数,因为一些软件会有问题。有没有办法把它缩放到一个整数值?

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="29dp"
    android:height="27dp"
    android:viewportWidth="6.9083"
    android:viewportHeight="6.3553">
  <path
      android:fillColor="#1276e7"
      android:pathData="M4.7153,0c-0.4826,0 -0.8099,0.1678 -1.2612,0.5483 -0.4512,-0.3806 -0.7785,-0.5483 -1.2612,-0.5483C0.8565,0 0,1.0658 0,2.5002 0,3.6134 1.0128,4.8393 3.0081,6.2167c0.2683,0.1848 0.6237,0.1848 0.892,0 1.9954,-1.3774 3.0082,-2.6033 3.0082,-3.7166 0,-1.4344 -0.8566,-2.5002 -2.193,-2.5002Z" />
</vector>
<?xml version="1.0" encoding="UTF-8"?>
<svg id="_图层_2" data-name="图层 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 6.90827050209009 6.355319979191336">
  <defs>
    <style>
      .cls-1 {
        isolation: isolate;
      }

      .cls-2 {
        fill: #1276e7;
      }
    </style>
  </defs>
  <g id="_形状_87_拷贝" data-name="形状 87 拷贝" class="cls-1">
    <g id="_形状_87_拷贝-2" data-name="形状 87 拷贝">
      <path class="cls-2" d="M4.71527733802759,0c-.48260498046875,0-.80987548828125,.1678466796875-1.26116943359375,.54827880859375-.451171875-.380615234375-.77850341796875-.54827880859375-1.26116943359375-.54827880859375C.85651268959009,0,.00000634193384,1.0657958984375,.00000634193384,2.50018310546875,.00000634193384,3.6134033203125,1.01276268959009,4.83929443359375,3.00812401771509,6.21673583984375c.268310546875,.18475341796875,.6236572265625,.18475341796875,.8919677734375,0,1.995361328125-1.37744140625,3.0081787109375-2.60333251953125,3.0081787109375-3.716552734375,0-1.43438720703125-.85662841796875-2.50018310546875-2.1929931640625-2.50018310546875Z"/>
    </g>
  </g>
</svg>

正如您所看到的,宽度和高度是整数,但viewportWidthviewportHeight是十进制数,我希望缩放路径,使其恰好与widthheight(29 x 27)匹配

6qftjkof

6qftjkof1#

根据您的<path>几何体,您可以尝试将所有命令坐标舍入为整数。
您可以使用yqnn's path editor执行此任务。
在您的情况下,四舍五入到整数单独将扭曲您的路径,因为心脏命令点将对齐到一个网格的7x6用户单位-我们需要一个更好的网格分辨率。

为了解决这个问题,我们可以缩放路径,例如10倍,它的原始大小和四舍五入所有的值再次整数。

我还建议将命令转换为相对命令。
这样,我们就可以通过调整前M个命令坐标来将路径居中于新的viewBox边界('006964')

svg{
  width:29px;
  height:27px;
  border: 1px solid red
}
<?xml version="1.0" encoding="UTF-8"?>
<svg id="_图层_2" data-name="图层 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 69 64">
  <defs>
    <style>
      .cls-1 {
        isolation: isolate;
      }

      .cls-2 {
        fill: #1276e7;
      }
    </style>
  </defs>
  <g id="_形状_87_拷贝" data-name="形状 87 拷贝" class="cls-1">
    <g id="_形状_87_拷贝-2" data-name="形状 87 拷贝">
      <path class="cls-2" d="M48 0c-5 0-8 2-13 5c-5-4-8-5-13-5c-13 0-22 11-22 25c0 11 10 23 30 37c3 2 6 2 9 0c20-14 30-26 30-37c0-14-9-25-22-25z"/>
    </g>
  </g>
</svg>

相关问题