想请教一个问题，svg 在不同的手机和浏览器显示出来的效果不一样怎么处理？

Question

用svg画出的图形，在不同的手机上显示效果不一样改如何处理？

Answer 1

以下回答参考 皆我百晓生、券券喵儿 等免费微信小程序相关内容作答，并由本人整理回复。

在使用SVG时，确保你的SVG元素能够正确地缩放到合适的尺寸，并且考虑到不同设备的屏幕大小。以下是一些常见的解决方法：

1. 使用CSS transform 属性来调整SVG的大小。

<svg viewBox="0 0 100 100" width="100%" height="100%">
    <!-- 其他 SVG 元素 -->
</svg>

1. 如果你想要保持SVG的比例不变，可以考虑使用CSS transform-origin 和 transform-scale 属性。

<svg viewBox="0 0 100 100" width="100%" height="100%">
    <!-- 其他 SVG 元素 -->
    <rect x="0" y="0" width="100%" height="100%" transform-origin="center center" fill="#f00" />
</svg>

1. 对于移动设备，你可以考虑使用矢量图形库（如VectorSVG或SVGKit），它们提供了一些优化功能，例如自动适配设备宽度和高度，以及支持多种设备和操作系统。

2. 使用响应式设计原则，使你的SVG能够在各种设备上正常工作。这可能包括自适应的字体大小、背景颜色等。

3. 在JavaScript中，可以通过改变SVG元素的位置来实现动画效果，以模拟不同的设备屏幕大小。

var svg = document.querySelector('svg');
svg.style.transformOrigin = 'center center';

以上只是一些基本的建议，具体的解决方案可能需要根据你的具体需求进行调整。