Question

我已经看过几个类似的问题，但是似乎找不到很容易做到的答案。就像标题所说的，我正在尝试使用viewBox方法缩放svg。缩放svg没问题，但是没有缩放svg中的路径。这是我正在使用的代码：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 659 659" xmlns:xlink="http://www.w3.org/1999/xlink" width="659" height="659">  

<g> 
    <path fill="none" d="M13.528,293.508C4.551,269.306,0,243.827,0,217.778c0-28.265,5.336-55.765,15.859-81.737l1.802,0.73
        C7.233,162.51,1.945,189.765,1.945,217.778c0,25.817,4.511,51.068,13.407,75.053L13.528,293.508z"></path>

<path d="M217.778,435.556c-41.973,0-82.721-11.965-117.838-34.603c-34.202-22.047-61.498-53.081-78.937-89.745
        c-0.231-0.485-0.025-1.065,0.46-1.296c0.484-0.233,1.065-0.025,1.296,0.46c17.284,36.337,44.337,67.095,78.235,88.946
        c34.803,22.435,75.186,34.293,116.784,34.293c11.55,0,23.139-0.919,34.445-2.733c0.526-0.087,1.029,0.275,1.114,0.806
        c0.085,0.53-0.276,1.029-0.806,1.114C241.123,434.629,229.431,435.556,217.778,435.556z"></path>

<path fill="none" d="M269.654,429.34l-0.461-1.889c30.629-7.484,59.825-21.988,84.433-41.944l1.225,1.511
        C330.021,407.152,300.56,421.787,269.654,429.34z"></path>

<path d="M361.996,380.637c-0.268,0-0.534-0.11-0.726-0.325c-0.357-0.401-0.322-1.015,0.079-1.373
        c45.924-40.941,72.264-99.682,72.264-161.161c0-15.731-1.701-31.424-5.054-46.646c-0.115-0.525,0.216-1.043,0.74-1.159
        c0.526-0.12,1.043,0.216,1.159,0.74c3.384,15.359,5.099,31.194,5.099,47.064c0,62.033-26.576,121.303-72.914,162.612
        C362.457,380.556,362.226,380.637,361.996,380.637z"></path>

<path fill="none" d="M423.026,150.825c-17.539-53.8-56.571-99.477-107.089-125.319l0.886-1.731
        c50.971,26.074,90.355,72.162,108.051,126.447L423.026,150.825z"></path>

<path d="M28.427,113.072c-0.16,0-0.323-0.04-0.474-0.124c-0.469-0.262-0.636-0.855-0.374-1.323C66.089,42.772,138.969,0,217.778,0
        c31.227,0,61.374,6.469,89.603,19.229c0.489,0.221,0.706,0.797,0.485,1.287c-0.221,0.489-0.797,0.706-1.287,0.485
        C278.605,8.356,248.727,1.945,217.778,1.945c-78.106,0-150.336,42.391-188.502,110.63
        C29.098,112.893,28.768,113.072,28.427,113.072z"></path>

</g>

</svg>

我也尝试过使用CSS进行扩展，但是同样，它似乎只能扩展主svg容器，而不能扩展其中的路径。尝试使用：

svg{width:659px;height:659px;}

我可以使用它来缩放

transform: scale(1.3);

但是尺寸调整不是很准确。我需要做到像素完美。

这是一个jsFiddle：https://jsfiddle.net/alexgomy/j1g4hms8/1/

SVG路径未缩放

0 个答案: