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

Question

我正在开发一个 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 图像不清晰。它看起来更像是一个被缩放的位图。这是一个示例，当我放大到最大比例时它的样子（在上面的代码片段中您可以看到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

Answer 1

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

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