【H5】 svg内text、image、path标签的使用

【H5】 svg内text、image、path标签的使用：

text标签：

<div id='wrap' style="width: 500px;height: 500px;border: 2px solid pink;margin: 50px auto 0;">
        <svg xmlns="http://www.w3.org/2000/svg" width='500' height='500'>
            
            
            
            <text x='250' y='250' font-size='50' text-anchor="end" fill="#000" >我是文字text>
        svg>
    div>

image标签：

    <div id='wrap' style=" width:500px; height:500px;border:2px solid pink;margin:50px auto; background-color: #90f;">
        <svg xmlns="http://www.w3.org/2000/svg" width='100%' height='100%'>
            
            circle>
            <image x='180' y='180' width='140'  xlink:href='1.jpg'>image>
            
            <text x='250' y='250' font-size='50' text-anchor="middle" stroke-width='3' stroke='pink' fill='red'>Pia~text>
        svg>
    div>

path标签： M(起始坐标) L(结束坐标) Z(闭合路劲) 画路径

    <div id='wrap' style="width: 500px;height: 500px;border: 2px solid pink;margin: 50px auto 0;background-color: #ccc;">
        <svg xmlns="http://www.w3.org/2000/svg" width='100%' height='100%'>
          
          <path d='M50 50  L150 150  L250 150  L250 50Z'>path>
      svg>
    div>

path标签： M(起始坐标) L(结束坐标) H(水平线) V(垂直线) Z(闭合路劲) 画路径

    <div id='wrap'>
        <svg xmlns="http://www.w3.org/2000/svg" width='1000' height='500'>
            
            
            
            <path d='M50 50  L150 150  L250 150  L250 50Z M50 250 L150 350 h150 v-50Z '>path>
            
            
            <path d='M500 50 H700 V250 h-200 v-200'>path>
        svg>
    div>