Я пытаюсь отобразить код, сгенерированный SVG, используя Webview. Следующий компонент ведет себя так, как мне нужно на Android, но svg не подходит для веб-просмотра на iOS /
import * as React from "react";
import { View } from "react-native";
import WebView from "react-native-webview";
function TestComp() {
return (
<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
<View style={{ height: 100, width: 100 }}>
<WebView source={{ html }}/>
</View>
</View>
);
}
export default TestComp;
const html = `<html>
<head>
<style>
html, body { background-color: blue; }
svg {
position: fixed;
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<svg viewBox="0 0 75 135">
<circle cx="38.2" cy="25.7" r="25.7"/>
<path d="M56.5,134h-38c-10.1,0-18.3-8.2-18.3-18.3v-38c0-10.1,8.2-18.3,18.3-18.3h38 c10.1,0,18.3,8.2,18.3,18.3v38C74.8,125.8,66.6,134,56.5,134z"/>
</svg>
</body>
</html>`;
Android (правильный результат) :
iOS, обрезано :
Я думаю, что iOS не обрабатывает position: fixed как android ... но я понятия не имею, почему и как это исправить. Любое решение?