其他分享
首页 > 其他分享> > SVG中的路径

SVG中的路径

作者：互联网

1、使用moveto与lineto

image

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
    width="150px" height="150px" viewBox="0 0 150 150">
    <g style="stroke:black;fill:none;">
        <!--一条线 -->
        <path d="M 10 10 L 100 10"/>
        <!-- 一个直角 -->
        <path d="M 10,20 L 100,20 L 100,50"/>
        <!-- 两个30度角 -->
        <path d="M 40 60 L 10 60 L40 42.68 M 60 60 L 90 60 L 60 42.68"/>
    </g>
</svg>

2、使用closepath

image

<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
    width="150px" height="150px" viewBox="0 0 150 150">
    <g style="stroke:black;fill:none;" transform="scale(5)">
        <!-- 四条线形式的矩形 -->
        <path d="M 10 10 L 40 10 L 40 30 L 10 30 L 10 10"/>
        <!-- closepath绘制的矩形 -->
        <path d="M 60 10 L 90 10 L 90 30 L 60 30 Z"/>
        <!-- 绘制两个三角形 -->
        <path d="M 40 60 L 10 60 L 40 42.68 Z M 60 60 L 90 60 L 60 42.68 Z"/>
    </g>
</svg>

3、相对moveto和lineto

image
小写为相对坐标，大写为绝对坐标，moveto小写位于首位时为绝对坐标，closepath大小写效果相同

<svg xmlns="http://www.w3.org/2000/svg">
    width="150px" height="150px" viewBox="0 0 150 150">
    <path d="M 10 10L 20 10 L 20 30 M 40 40 L 55 35"
          style="stroke:black;fill:none;" transform="scale(3)"/>
    <path d="M 10 10 l 10 0 l 0 20 m 20 10 l 15 -5"
          style="stroke:black;fill:none;" transform="translate(100,0) scale(3)"/>
</svg>

4、路径的快捷方式

image

<svg xmlns="http://www.w3.org/2000/svg">
    width="150px" height="150px" viewBox="0 0 150 150">
    <g style="stroke:black;fill:none;">
        <path d="M 30 30 L 55 5 L 80 30 L 55 55 Z" transform="translate(0,0) scale(3)"/>
        <path d="M 30 30 L 55 5 80 30 55 55 Z" transform="translate(160,0) scale(3)"/>
        <path d="M 30 30 55 5 80 30 55 55 Z" transform="translate(320,0) scale(3)"/>
        <path d="m 30 30 l 25 -25 25 25 -25 25 z" transform="translate(480,0) scale(3)"/>
        <path d="m 30 30 25 -25 25 25 -25 25 z" transform="translate(640,0) scale(3)"/>
        <path d="M30 30 55 5 80 30 55 55Z" transform="translate(0,160) scale(3)"/>
        <path d="m30 30 25-25 25 25-25 25z" transform="translate(160,160) scale(3)"/>
    </g>
</svg>

标签：150,moveto,SVG,路径,height,width,viewBox,150px
来源： https://www.cnblogs.com/xl4ng/p/15860813.html