美文网首页Flutter技术文章
005.1 flutter_svg 使用demo【入门】

005.1 flutter_svg 使用demo【入门】

作者: 码农二哥 | 来源:发表于2020-03-13 14:57 被阅读0次

    展示矩形

    // 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

    相关文章

      网友评论

        本文标题:005.1 flutter_svg 使用demo【入门】

        本文链接:https://www.haomeiwen.com/subject/cijkshtx.html