平移和缩放 SVG 图像，但放大图像时不清晰答案

【问题标题】：pand and zoom SVG image but when zoom in the image is not sharp平移和缩放 SVG 图像，但放大图像时不清晰
【发布时间】：2021-03-05 05:58:58
【问题描述】：

我正在开发一个 React Native 项目。我们的后端返回一个指向远程 SVG 图像的 URL。我不仅需要显示 SVG，还需要能够在移动应用中平移和缩放它。

为了显示远程 SVG 图像，我使用 react-native-svg 库。
要平移和缩放 SVG，我使用 react-native-simple-svg-pan-zoom 库。

这是我尝试过的：

const windowWidth = Dimensions.get('window').width;
const windowHeight = Dimensions.get('window').height;

// I hardcode the remote SVG URL here for illustration purpose, it is from backend in my code.
const imageSource = 'https://www.example.com/foo.svg';
...
return (
      <SvgPanZoom
          canvasHeight={windowHeight}
          canvasWidth={windowWidth}
          minScale={0.5}
          maxScale={10}
          initialZoom={1}
          onZoom={zoom => {
            console.log('onZoom:' + zoom);
          }}>
          <SvgUri width="100%" height="100%" uri={imageSource} />
        </SvgPanZoom>
  )

运行我的应用程序时，会显示远程 SVG 图像，我可以根据配置进行放大和缩小。但是放大时，SVG 图像不清晰。它看起来更像是一个被缩放的位图。这是一个示例，当我放大到最大比例时（在上面的代码 sn-p 中，您可以看到 maxScale={10}）。

那么，如何缩放远程 SVG 图像？如果我使用的库不是一个好的选择，任何人都可以建议我使用其他库来解决我的问题？

==== 2021 年 2 月 2 日更新 ====

我按照@Minh Vo 的建议尝试了react-native-image-zoom-viewer。但是我得到空白屏幕，远程 svg 图像不是由库渲染的。

const svgImage = [{url: data.image.url}];
return (
<ImageViewer
            enableImageZoom={true}
            ref={() => {}}
            onChange={() => {}}
            renderIndicator={() => null}
            backgroundColor={'transparent'}
              imageUrls={svgImage} />);
    ...

如果你觉得我应该为我的问题提供 SVG 的 URL，你可以以此为例 https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/Steps.svg

【问题讨论】：

可能是因为你有一个宽度和一个高度canvasHeight={windowHeight}; canvasWidth={windowWidth}尝试声明一个viewBox属性来代替
您的意思是删除canvasHeight 和canvasWidth 并将代码包装在<View>...</View> 中吗？我没有看到库中名为 viewBox 的组件，您能否提供一个代码示例？
请阅读viewBox属性
谢谢。但是在我的情况下，它是一个远程 SVG（来自远程 uri），如何修改其内容以在我的 react-native 项目中注入 viewBox？如果能用一些代码sn-p来说明就好了。
看看这个 SO 问题：stackoverflow.com/questions/44029112/…

标签： react-native svg react-native-svg svgpanzoom

【解决方案1】：

我有同样的问题，我找到一个图书馆可以帮助解决这个问题。我建议这个react-native-image-zoom-viewer。即使 url 是 1 张图片或多张图片，您也可以轻松放大和缩小。该链接中的更多信息。这是代码演示：

        const images = "www.abc.com/image.svg"
        <ImageViewer
            ref={() => {}}
            onChange={() => {}}
            renderIndicator={() => null}
            backgroundColor={'transparent'}
            index={this.state.index}
            imageUrls={this.images} />

【讨论】：

你觉得这个库与 SVG 图像兼容吗？我的意思是当放大时像素仍然清晰吗？
我试过了，远程svg图片根本不显示。
对不起，我很忙，如果这个库对你没有帮助，你可以试试这个库：react-native-svg-uriimport SvgUri from "react-native-svg-uri";<SvgUri width={} source={{ uri: image_url }} resizeMode="contain" />

【解决方案2】：

根据您为react-native-simple-svg-pan-zoom 提供的文档，

建议不要将 maxScale 设置为 1 以上，因为这会导致 react-native-svg 元素模糊。相反，增加 SVG 元素的尺寸并将 minScale 设置得更低。

所以我猜你应该选择低于 1 的 maxScale 并尝试使用较低的 minScale 值以及较高的 canvasWidth 和 canvasHeight 值，直到获得所需的缩放级别。

【讨论】：