标签：150 moveto SVG 路径 height width viewBox 150px

1、使用moveto与lineto

<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

<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

小写为相对坐标，大写为绝对坐标，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、路径的快捷方式

<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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。