如何解决react-native-svg 在 Pattern 中定义的图像位于错误的坐标
所以这些是一些具有边界半径的矩形，它们以图像为背景。该 .svg 是从 figma 导出的，我使用 react-svgr.com 将其转换为 React 组件，如下所示：
import Svg,{
SvgProps,Rect,Path,Defs,Pattern,Use,Image,} from "react-native-svg"
function SvgComponent(props: SvgProps) {
return (
<Svg
width={375}
height={451}
viewBox="0 0 375 451"
fill="none"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
{...props}
>
<Rect
x={141}
y={24}
width={45}
height={45}
rx={22.5}
fill="url(#pattern0)"
/>
<Rect
x={103}
y={1}
width={27}
height={27}
rx={13.5}
fill="url(#pattern1)"
fillOpacity={0.2}
/>
<Rect
x={37}
y={43}
width={52}
height={52}
rx={26}
fill="url(#pattern2)"
/>
<Rect
x={20}
y={119}
width={77}
height={77}
rx={38.5}
fill="url(#pattern3)"
/>
<Rect
x={109}
y={75}
width={36}
height={36}
rx={18}
fill="url(#pattern4)"
fillOpacity={0.5}
/>
<Rect
x={181}
y={105}
width={70}
height={70}
rx={35}
fill="url(#pattern5)"
/>
<Rect
x={286}
y={49}
width={70}
height={70}
rx={35}
fill="url(#pattern6)"
/>
<Rect
opacity={0.1}
x={283}
y={13}
width={24}
height={24}
rx={12}
fill="url(#pattern7)"
/>
<Rect
x={263}
y={140}
width={101}
height={101}
rx={50.5}
fill="url(#pattern8)"
/>
<Rect
x={221}
y={36}
width={48}
height={48}
rx={24}
fill="url(#pattern9)"
fillOpacity={0.5}
/>
<Rect
x={208}
width={15}
height={15}
rx={7.5}
fill="url(#pattern10)"
fillOpacity={0.5}
/>
<Path
fillRule="evenodd"
clipRule="evenodd"
d="M190 95.5C190 100.194 186.194 104 181.5 104C176.805 104 173 100.194 173 95.5C173 90.8056 176.805 87 181.5 87C186.194 87 190 90.8056 190 95.5ZM159 122.5C159 139.345 145.344 153 128.5 153C111.655 153 97.9998 139.345 97.9998 122.5C97.9998 105.655 111.655 92 128.5 92C145.344 92 159 105.655 159 122.5ZM90.2745 308.718C78.681 329.187 56.7037 343 31.5 343C-5.77922 343 -36 312.779 -36 275.5C-36 257.443 -28.9096 241.042 -17.3612 228.929C-19.0572 225.133 -20.0002 220.927 -20.0002 216.5C-20.0002 199.655 -6.34493 186 10.4998 186C20.055 186 28.5839 190.394 34.1762 197.272C45.6154 176.26 67.8924 162 93.5 162C108.072 162 121.565 166.617 132.596 174.469C135.396 160.513 147.72 150 162.5 150C175.81 150 187.129 158.526 191.293 170.414C194.198 169.496 197.291 169 200.5 169C205.309 169 209.859 170.113 213.905 172.096C217.213 158.829 229.209 149 243.5 149C260.345 149 274 162.655 274 179.5C274 185.335 272.361 190.788 269.519 195.423C272.975 195.143 276.471 195 280 195C301.742 195 322.218 200.421 340.15 209.985C345.133 199.92 355.508 193 367.5 193C384.344 193 398 206.655 398 223.5C398 234.1 392.592 243.437 384.385 248.903C399.256 269.815 408 295.386 408 323C408 393.692 350.692 451 280 451C260.867 451 242.714 446.802 226.413 439.277C222.008 439.755 217.532 440 213 440C145.069 440 90 384.931 90 317C90 314.217 90.0925 311.455 90.2745 308.718ZM194 156C202.836 156 210 148.837 210 140C210 131.163 202.836 124 194 124C185.163 124 178 131.163 178 140C178 148.837 185.163 156 194 156Z"
fill="#335EEA"
/>
<Defs>
<Pattern
id="pattern0"
patternContentUnits="objectBoundingBox"
width={1}
height={1}
>
<Use
xlinkHref="#image0"
transform="translate(0 -0.521277) scale(0.00425532)"
/>
</Pattern>
<Pattern
id="pattern1"
patternContentUnits="objectBoundingBox"
width={1}
height={1}
>
<Use
xlinkHref="#image1"
transform="translate(-0.25) scale(0.003125)"
/>
</Pattern>
<Pattern
id="pattern2"
patternContentUnits="objectBoundingBox"
width={1}
height={1}
>
<Use
xlinkHref="#image2"
transform="translate(0 -0.25) scale(0.003125)"
/>
</Pattern>
<Pattern
id="pattern3"
patternContentUnits="objectBoundingBox"
width={1}
height={1}
>
<Use
xlinkHref="#image3"
transform="translate(0 -0.181818) scale(0.00284091)"
/>
</Pattern>
<Pattern
id="pattern4"
patternContentUnits="objectBoundingBox"
width={1}
height={1}
>
<Use
xlinkHref="#image4"
transform="translate(0 -0.121762) scale(0.00259067)"
/>
</Pattern>
<Pattern
id="pattern5"
patternContentUnits="objectBoundingBox"
width={1}
height={1}
>
<Use
xlinkHref="#image5"
transform="translate(0 -0.25) scale(0.003125)"
/>
</Pattern>
<Pattern
id="pattern6"
patternContentUnits="objectBoundingBox"
width={1}
height={1}
>
<Use
xlinkHref="#image6"
transform="translate(0 -0.25) scale(0.003125)"
/>
</Pattern>
<Pattern
id="pattern7"
patternContentUnits="objectBoundingBox"
width={1}
height={1}
>
<Use
xlinkHref="#image7"
transform="translate(-0.0783133) scale(0.00240964)"
/>
</Pattern>
<Pattern
id="pattern8"
patternContentUnits="objectBoundingBox"
width={1}
height={1}
>
<Use
xlinkHref="#image8"
transform="translate(0 -0.25) scale(0.003125)"
/>
</Pattern>
<Pattern
id="pattern9"
patternContentUnits="objectBoundingBox"
width={1}
height={1}
>
<Use
xlinkHref="#image9"
transform="translate(-0.25) scale(0.003125)"
/>
</Pattern>
<Pattern
id="pattern10"
patternContentUnits="objectBoundingBox"
width={1}
height={1}
>
<Use
xlinkHref="#image10"
transform="translate(-0.25) scale(0.003125)"
/>
</Pattern>
<Image
id="image0"
width={235}
height={480}
xlinkHref="data..."
/>
<Image
id="image1"
width={480}
height={320}
xlinkHref="data..."
/>
<Image
id="image3"
width={352}
height={480}
xlinkHref="data..."
/>
<Image
id="image4"
width={386}
height={480}
xlinkHref="data..."
/>
<Image
id="image5"
width={320}
height={480}
xlinkHref="data..."
/>
<Image
id="image6"
width={320}
height={480}
xlinkHref="data..."
/>
<Image
id="image7"
width={480}
height={415}
xlinkHref="data..."
/>
<Image
id="image8"
width={320}
height={480}
xlinkHref="data..."
/>
<Image
id="image9"
width={480}
height={320}
xlinkHref="data..."
/>
<Image
id="image10"
width={480}
height={320}
xlinkHref="data.."
/>
</Defs>
</Svg>
)
}
export default SvgComponent
我遇到的问题是渲染的 svg 组件如下所示：
因此，定义为 Patterns 的矩形的图像具有错误的坐标/与这些矩形的位置不匹配。我不确定为什么会这样，并尝试重新格式化我的 .svg，但似乎没有解决问题。有人可以指出我正确的方向吗？
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
