Question

TL; DR

我在下面有一个SVG元素。它的宽度和高度分别为439和125。如何将该图像缩小到263乘75，这应该是相同的宽高比？

这是fiddle

我有一个SVG图像，只不过是我用大字母写ADAM（在现实生活中它是某人的签名）。

enter image description here

我正在尝试将其缩小到更小，但不会扭曲。根据我的阅读，我想我需要选择我想要的高度，根据宽高比计算合适的宽度，然后相应地设置我的viewBox。

所以现在宽度为439，高度为125，宽高比为3.512。因此，如果我想要一个75的新高度，我会假设新的宽度= 3.512 * 75 = 263，这似乎是合理的。所以我设置viewBox="0 0 263 75"

现在有了

enter image description here

显然它只是从原始图像中取出那些尺寸并将它们拉伸到适合我原始视口439 x 125.添加preserveAspectRatio="xMinYMin slice|meet|none"没有任何效果，并且跳过所有这些只是修改原始高度和宽度无情地截断了我的整个图像。

缩放此SVG对象的正确方法是什么？？

更新1

我尝试使用viewBox，以及高度和宽度，因此

<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1" width="263" height="75" id="XX" viewBox="0 0 263 75" preserveAspectRatio="xMinYMin none">

确实调整整个SVG的大小，但它仍然只是截断我的原始图像（如第二个屏幕截图所示），而不是缩小它。

Fiddle

<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1" width="439" height="125" id="__svg__random___1"> <path style="fill:none;stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round" d="M 60 2 c -0.05 0.05 -2.31 1.9 -3 3 c -0.87 1.39 -1.25 3.32 -2 5 c -0.62 1.39 -1.25 2.69 -2 4 c -0.6 1.05 -1.3 1.95 -2 3 c -0.7 1.05 -1.56 1.97 -2 3 c -0.51 1.18 -0.41 2.96 -1 4 c -0.61 1.07 -2.18 1.9 -3 3 c -1.13 1.51 -2.05 3.25 -3 5 c -1.1 2.01 -2.14 3.93 -3 6 c -0.81 1.95 -1.19 4.05 -2 6 c -0.86 2.07 -1.9 3.99 -3 6 c -0.95 1.75 -2.05 3.25 -3 5 c -1.1 2.01 -1.95 3.9 -3 6 c -1.05 2.1 -1.95 3.9 -3 6 c -1.05 2.1 -1.95 3.9 -3 6 c -1.05 2.1 -2.14 3.93 -3 6 c -0.81 1.95 -1.18 4.15 -2 6 c -0.47 1.06 -1.47 1.94 -2 3 c -1.12 2.25 -1.98 4.56 -3 7 c -0.72 1.73 -1.21 3.43 -2 5 c -0.53 1.05 -1.47 1.95 -2 3 c -0.79 1.57 -1.43 3.29 -2 5 c -0.44 1.31 -0.49 2.82 -1 4 c -0.44 1.03 -1.56 1.97 -2 3 c -0.51 1.18 -0.65 2.6 -1 4 c -0.35 1.4 -1 4 -1 4"></path> <path style="fill:none;stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round" d="M 59 3 c 0.07 0.05 2.63 1.94 4 3 c 1.75 1.36 3.79 2.49 5 4 c 1.26 1.58 1.82 4.43 3 6 c 0.63 0.84 2.33 1.19 3 2 c 0.84 1 1.25 2.69 2 4 c 0.6 1.05 1.26 2.02 2 3 c 1.31 1.74 2.69 3.26 4 5 c 0.74 0.98 1.34 1.95 2 3 c 1.07 1.7 1.98 3.25 3 5 c 1.41 2.42 2.59 4.58 4 7 c 1.02 1.75 2.03 3.26 3 5 c 0.74 1.33 1.26 2.67 2 4 c 0.97 1.74 1.87 3.49 3 5 c 0.82 1.1 2.18 1.9 3 3 c 1.13 1.51 1.98 3.25 3 5 c 1.41 2.42 2.55 4.71 4 7 c 0.9 1.42 2.39 2.63 3 4 c 0.62 1.4 0.48 3.45 1 5 c 0.45 1.36 1.3 2.6 2 4 c 0.7 1.4 1.38 2.61 2 4 c 0.75 1.68 1.49 3.3 2 5 c 0.48 1.61 0.48 3.45 1 5 c 0.45 1.36 1.49 2.64 2 4 c 0.47 1.26 0.56 2.69 1 4 c 0.57 1.71 1.43 3.29 2 5 c 0.44 1.31 0.56 2.69 1 4 c 0.57 1.71 2 5 2 5"></path> <path style="fill:none;stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round" d="M 95 51 c -0.05 -0.05 -1.92 -2.46 -3 -3 c -1.3 -0.65 -3.27 -0.71 -5 -1 c -2.4 -0.4 -4.65 -0.8 -7 -1 c -1.67 -0.14 -3.25 0 -5 0 c -1.75 0 -3.4 0.18 -5 0 c -1.32 -0.15 -2.67 -0.9 -4 -1 c -2.9 -0.22 -5.85 0 -9 0 c -2.45 0 -4.67 -0.17 -7 0 c -2.36 0.17 -4.64 0.57 -7 1 c -1.37 0.25 -2.62 0.72 -4 1 c -2.03 0.41 -3.9 0.65 -6 1 c -2.1 0.35 -3.97 0.59 -6 1 c -1.38 0.28 -3.08 0.39 -4 1 c -0.8 0.54 -2 3 -2 3"></path> <path style="fill:none;stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round" d="M 148 3 c 0 0.11 -0.17 4.02 0 6 c 0.17 2.01 0.85 3.99 1 6 c 0.18 2.31 0 4.55 0 7 c 0 2.8 0 5.2 0 8 c 0 2.45 0 4.55 0 7 c 0 2.1 0 3.9 0 6 c 0 2.1 0 3.9 0 6 c 0 2.1 0.18 4.04 0 6 c -0.15 1.67 -0.68 3.26 -1 5 c -0.38 2.07 -0.65 3.9 -1 6 c -0.35 2.1 -0.82 3.99 -1 6 c -0.15 1.65 0 3.25 0 5 c 0 2.1 0 3.9 0 6 c 0 2.1 0 3.9 0 6 c 0 2.1 0 3.9 0 6 c 0 2.1 0 3.9 0 6 c 0 2.45 0 4.55 0 7 c 0 2.45 0.19 4.71 0 7 c -0.14 1.67 -1 5 -1 5"></path> <path style="fill:none;stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round" d="M 148 2 c 0.07 -0.02 2.68 -0.87 4 -1 c 1.93 -0.19 3.9 0 6 0 c 1.75 0 3.4 -0.18 5 0 c 1.32 0.15 2.68 0.87 4 1 c 1.93 0.19 4.18 -0.33 6 0 c 1.63 0.3 3.3 1.49 5 2 c 1.61 0.48 3.45 0.48 5 1 c 1.36 0.45 2.64 1.59 4 2 c 1.85 0.55 4.15 0.45 6 1 c 1.36 0.41 2.86 1.18 4 2 c 1.08 0.77 1.93 2.11 3 3 c 0.91 0.76 2.09 1.24 3 2 c 1.07 0.89 1.92 2.06 3 3 c 1.63 1.42 3.38 2.56 5 4 c 1.43 1.27 2.88 2.56 4 4 c 1.16 1.49 1.86 3.67 3 5 c 0.71 0.82 2.33 1.19 3 2 c 0.84 1 1.38 2.61 2 4 c 0.75 1.68 1.25 3.32 2 5 c 0.62 1.39 1.38 2.61 2 4 c 0.75 1.68 1.43 3.29 2 5 c 0.44 1.31 0.87 2.68 1 4 c 0.19 1.93 0 3.9 0 6 c 0 1.75 0.18 3.4 0 5 c -0.15 1.32 -0.49 2.82 -1 4 c -0.44 1.03 -1.24 2.09 -2 3 c -0.89 1.07 -1.92 2.23 -3 3 c -1.14 0.82 -2.86 1.18 -4 2 c -1.08 0.77 -1.92 2.08 -3 3 c -1.27 1.09 -2.6 2 -4 3 c -1.01 0.72 -1.95 1.3 -3 2 c -1.05 0.7 -1.99 1.28 -3 2 c -1.4 1 -2.73 1.91 -4 3 c -1.08 0.92 -2.11 1.93 -3 3 c -0.76 0.91 -1.22 2.22 -2 3 c -0.78 0.78 -2.09 1.24 -3 2 c -1.07 0.89 -1.95 1.95 -3 3 c -1.05 1.05 -1.95 1.95 -3 3 c -1.05 1.05 -1.95 1.95 -3 3 c -1.4 1.4 -2.6 2.6 -4 4 c -1.05 1.05 -1.92 2.06 -3 3 c -1.63 1.42 -3.54 2.54 -5 4 c -1.14 1.14 -1.87 3.03 -3 4 c -1.01 0.87 -4 2 -4 2"></path> <path style="fill:none;stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round" d="M 266 5 c -0.02 0.11 -0.59 3.97 -1 6 c -0.28 1.38 -0.69 2.61 -1 4 c -0.38 1.72 -0.65 3.25 -1 5 c -0.35 1.75 -0.68 3.26 -1 5 c -0.38 2.07 -0.54 4 -1 6 c -0.55 2.39 -1.4 4.59 -2 7 c -0.42 1.69 -0.68 3.26 -1 5 c -0.38 2.07 -0.65 3.9 -1 6 c -0.35 2.1 -0.45 4.15 -1 6 c -0.41 1.36 -1.38 2.61 -2 4 c -0.75 1.68 -1.43 3.29 -2 5 c -0.44 1.31 -0.5 2.75 -1 4 c -0.81 2.03 -2.33 3.98 -3 6 c -0.61 1.83 -0.45 4.15 -1 6 c -0.41 1.36 -1.71 2.7 -2 4 c -0.32 1.46 0.28 3.45 0 5 c -0.36 1.95 -1.36 3.91 -2 6 c -0.74 2.4 -1.52 4.62 -2 7 c -0.53 2.63 -0.42 5.47 -1 8 c -0.39 1.69 -1.25 3.32 -2 5 c -0.62 1.39 -1.25 2.69 -2 4 c -0.6 1.05 -2 3 -2 3"></path> <path style="fill:none;stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round" d="M 267 1 c 0.05 0.05 2.23 1.92 3 3 c 0.82 1.14 1.22 2.75 2 4 c 0.87 1.4 2.22 2.6 3 4 c 0.84 1.51 1.2 3.4 2 5 c 0.87 1.73 1.91 3.36 3 5 c 0.94 1.41 2 2.6 3 4 c 0.72 1.01 1.28 1.99 2 3 c 1 1.4 2 2.6 3 4 c 0.72 1.01 1.28 1.99 2 3 c 1 1.4 1.95 2.6 3 4 c 1.05 1.4 2.13 2.6 3 4 c 0.78 1.25 1.18 2.86 2 4 c 0.77 1.08 2.26 1.89 3 3 c 1.17 1.75 1.86 4.1 3 6 c 0.85 1.41 2 2.6 3 4 c 0.72 1.01 1.28 1.99 2 3 c 1 1.4 2 2.6 3 4 c 0.72 1.01 1.28 1.99 2 3 c 1 1.4 1.91 2.73 3 4 c 0.92 1.08 2.08 1.92 3 3 c 1.09 1.27 2.13 2.6 3 4 c 0.78 1.25 1.25 2.69 2 4 c 0.6 1.05 1.47 1.94 2 3 c 1.12 2.25 1.88 4.75 3 7 c 0.53 1.06 1.4 1.95 2 3 c 0.75 1.31 1.38 2.61 2 4 c 0.75 1.68 1.25 3.32 2 5 c 0.62 1.39 1.49 2.64 2 4 c 0.47 1.26 0.65 2.6 1 4 c 0.35 1.4 0.56 2.69 1 4 c 0.57 1.71 2 5 2 5"></path> <path style="fill:none;stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round" d="M 312 45 c -0.09 0 -3.25 0 -5 0 c -2.1 0 -4 -0.15 -6 0 c -2.36 0.18 -4.6 0.6 -7 1 c -1.73 0.29 -3.28 0.62 -5 1 c -1.39 0.31 -2.61 0.69 -4 1 c -1.72 0.38 -3.39 0.52 -5 1 c -1.7 0.51 -3.32 1.25 -5 2 c -1.39 0.62 -2.6 1.3 -4 2 c -1.4 0.7 -2.6 1.3 -4 2 c -1.4 0.7 -2.6 1.3 -4 2 c -1.4 0.7 -2.64 1.49 -4 2 c -1.26 0.47 -2.6 0.65 -4 1 c -1.4 0.35 -2.74 0.53 -4 1 c -1.36 0.51 -4 2 -4 2"></path> <path style="fill:none;stroke:#000000;stroke-width:2;stroke-linecap:round;stroke-linejoin:round" d="M 353 125 c 0 -0.09 -0.34 -3.62 0 -5 c 0.25 -1 1.75 -2 2 -3 c 0.34 -1.38 0 -3.25 0 -5 c 0 -1.75 -0.13 -3.32 0 -5 c 0.21 -2.7 0.79 -5.3 1 -8 c 0.13 -1.68 0 -3.25 0 -5 c 0 -2.1 0 -3.9 0 -6 c 0 -1.75 0 -3.25 0 -5 c 0 -2.1 0 -3.9 0 -6 c 0 -1.75 -0.12 -3.32 0 -5 c 0.22 -3.05 0.39 -6.17 1 -9 c 0.36 -1.68 1.58 -3.31 2 -5 c 0.55 -2.22 0.42 -4.86 1 -7 c 0.37 -1.36 1.49 -2.64 2 -4 c 0.47 -1.26 0.56 -2.69 1 -4 c 0.57 -1.71 1.43 -3.29 2 -5 c 0.44 -1.31 0.56 -2.69 1 -4 c 0.57 -1.71 1.43 -3.29 2 -5 c 0.44 -1.31 0.65 -2.6 1 -4 c 0.35 -1.4 0.85 -2.68 1 -4 c 0.18 -1.6 0 -3.25 0 -5 c 0 -1.75 0 -3.25 0 -5 c 0 -2.1 0 -5.89 0 -6 c 0 -0.09 -0.14 3.33 0 5 c 0.2 2.35 0.6 4.6 1 7 c 0.29 1.73 0.62 3.28 1 5 c 0.31 1.39 0.72 2.62 1 4 c 0.41 2.03 0.48 4.09 1 6 c 0.46 1.69 1.68 3.38 2 5 c 0.3 1.51 -0.18 3.4 0 5 c 0.15 1.32 0.49 2.82 1 4 c 0.44 1.03 1.61 1.97 2 3 c 0.55 1.46 0.48 3.45 1 5 c 0.45 1.36 1.49 2.64 2 4 c 0.47 1.26 0.69 2.61 1 4 c 0.38 1.72 0.52 3.39 1 5 c 0.51 1.7 1.43 3.29 2 5 c 0.44 1.31 0.53 2.74 1 4 c 0.51 1.36 1.65 4 2 4 c 0.33 0 0.88 -2.67 1 -4 c 0.2 -2.25 0 -4.55 0 -7 c 0 -2.8 0 -5.2 0 -8 c 0 -2.8 0 -5.2 0 -8 c 0 -2.1 0 -3.9 0 -6 c 0 -2.1 0 -3.9 0 -6 c 0 -1.75 -0.15 -3.35 0 -5 c 0.18 -2.01 0.65 -3.9 1 -6 c 0.35 -2.1 0.45 -4.15 1 -6 c 0.41 -1.36 1.55 -2.64 2 -4 c 0.52 -1.55 0.45 -3.54 1 -5 c 0.39 -1.03 1.3 -1.95 2 -3 c 0.7 -1.05 1.56 -1.97 2 -3 c 0.51 -1.18 0.44 -2.87 1 -4 c 0.68 -1.37 2.06 -3.73 3 -4 c 0.84 -0.24 3.09 1.09 4 2 c 1.18 1.18 2.03 3.26 3 5 c 0.74 1.33 1.3 2.6 2 4 c 0.7 1.4 1.59 2.64 2 4 c 0.55 1.85 0.62 3.93 1 6 c 0.32 1.74 0.55 3.35 1 5 c 0.56 2.05 1.41 3.92 2 6 c 0.77 2.71 1.26 5.24 2 8 c 0.65 2.44 1.56 4.63 2 7 c 0.55 2.95 0.59 5.91 1 9 c 0.28 2.07 0.72 3.93 1 6 c 0.41 3.09 0.47 6.01 1 9 c 0.48 2.72 1.17 5.34 2 8 c 0.86 2.75 2.07 5.22 3 8 c 1.13 3.39 1.97 6.51 3 10 c 0.72 2.43 1.3 4.55 2 7 c 0.7 2.45 1.3 4.55 2 7 c 0.7 2.45 2 7 2 7"></path> </svg>

Answer 1

要在SVG图像中指定独立于图像缩放大小的坐标，请使用SVG元素上的viewBox属性来定义图像的边界框在图像的坐标系中的位置，并使用width和height属性来定义相对于包含页面的宽度或高度。

将viewBox值设置为现在用于高度和宽度的值，然后根据需要调整高度和宽度。

修改：

修改 jsFiddle ...有效！

您遇到的问题是没有将viewBox设置为ORIGINAL大小...然后，修改高度/宽度。

缩放svg元素

1 个答案: