展示矩形
// ok
return Positioned(
left: x,
top: y,
child: Container(
// padding: const EdgeInsets.all(10.0),
// color: Colors.yellow,
width: parseWidth(width),
height: parseHeight(height),
child: SvgPicture.string('''<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120">
<rect width="100" height="50" x="10" y="70" fill="rgb(255, 0, 0)" stroke="blue" stroke-opacity="1.0" stroke-width="10" rx="20" ry="15"/>
</svg>''')
),
);
展示Path
// ok
return SvgPicture.string('''<svg viewBox="0 0 1000 1000"
width="100"
height="200"
stroke="red"
stroke-width="20"
fill="grey"
xmlns="http://www.w3.org/2000/svg">
<path d="M501.298 207.941l60.505-60.131c100.425-99.805 262.59-99.805 363.015 0 0.372 0.37 0.743 0.741 1.113 1.113 99.010 99.625 98.512 260.65-1.113 359.66l-423.518 420.902-426.117-423.481c-99.625-99.010-100.124-260.035-1.113-359.66 0.37-0.372 0.741-0.743 1.113-1.113 100.425-99.805 262.59-99.805 363.015 0l63.1 62.71z"
fill="yellow"
stroke="purple"
stroke-width="10"
></path>
</svg>''');
image.png
使用图片进行fill(需要自己定制flutter_svg已支持该功能)
// ok for image fill
return Positioned(
left: x,
top: y,
child: Container(
// padding: const EdgeInsets.all(10.0),
// color: Colors.yellow,
width: parseWidth(width),
height: parseHeight(height),
child: SvgPicture.string('''<svg viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events" version="1.1" baseProfile="full">
<defs>
<image id="pattern1" height="468" width="657" preserveAspectRatio="none" xlink:href="https://p6-tt.byteimg.com/img/ad-tetris-site/file/1583993327582/7c97780ea7eba5d91bb5895e9765d18d~noop.webp" />
</defs>
<path d="M1000 500c0 276.143-223.857 500-500 500s-500-223.857-500-500c0-276.143 223.857-500 500-500s500 223.857 500 500z" fill="url(#pattern1)"></path>
</svg>''',
width: width,
height: height,
fit: BoxFit.fill,//这里用的是fill,所以需要container来保证宽高比
),
image.png
网友评论