[英]Convert svg to react-native svg
I have the following svg code and I want to convert it to react-native-svg. 我有以下svg代码,我想将其转换为react-native-svg。 How is it done correctly? 如何正确完成?
<svg width=200 height=200>
<defs>
<marker id="markerArrow1" markerWidth="13" markerHeight="13" refX="2" refY="6" orient="auto">
<path d="M2,2 L2,11 L10,6 L2,2" />
</marker>
</defs>
<line x1="10" y1="10" x2="100" y2="100" style="stroke:#006600; marker-end: url(#markerArrow1)" />
</svg>
react-native-svg is an amazing package that has only a few differences. react-native-svg是一个了不起的软件包,只有几个区别。 First you need to validate everything you're using is supported. 首先,您需要验证所使用的所有内容是否受支持。
Going through the documentation you'll find that most things just have a difference in capitalization. 浏览文档时,您会发现大多数事情在大小写上都有差异。
At present, Marker is not supported (check the ToDo's in the documentation). 目前不支持Marker(请检查文档中的ToDo)。 If you can be good to go. 如果你可以去的很好。
You could use react-native-remote-svg , that would allow you to load any SVG code. 您可以使用react-native-remote-svg ,这将允许您加载任何SVG代码。
import React from 'react';
import Image from 'react-native-remote-svg';
class MyView extends React.Component {
render() {
const render =
"<svg width=200 height=200>" +
"<defs>" +
'<marker id="markerArrow1" markerWidth="13" markerHeight="13" refX="2" refY="6" orient="auto">' +
'<path d="M2,2 L2,11 L10,6 L2,2" />' +
"</marker>" +
"</defs>" +
'<line x1="10" y1="10" x2="100" y2="100" style="stroke:#006600; marker-end: url(#markerArrow1)" />' +
"</svg>";
return (
<Image
style={{ flex:1 }}
source={{
uri: "data:image/svg+xml;utf8," + render
}}
/>
);
}
Which gives me this image: 这给了我这张图片:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.