SVG中的path用法

2024-01-27 08:37:04

根据书上来测试的。

多加了两个定位的点。

<!DOCTYPE html>
<svg width='1000' height='800' version='1.1'
    xmlns='http://www.w3.org/2000/svg'>
    <path d="M30,100 L270,300
        M30,100 H270
        M30,100 V300
        M270,300, V100
        M270,300, H30"
      style="stroke: black; stroke-width: 2;"/>
      
    <path d="M30,100 C100,20 190,20 270,100
        S400,180 450,100"
      style="fill: white; stroke: red; stroke-width: 2;" />
      
    <circle cx='100' cy='20' r='2'/>
    <circle cx='190' cy='20' r='2'/>
    <circle cx='270' cy='100' r='2'/>
    <circle cx='400' cy='180' r='2'/>
    <circle cx='450' cy='100' r='2'/>
    
    <path d="M30,100 Q190,20 270,100
        T450,100"
      style="fill: white; stroke: purple; stroke-width: 2;" />
      
    <path d="M100,500 a200,150 0 1,0 150, -150 Z"
      style="fill: yellow; stroke: blue; stroke-width: 2;" />
      
    <text x="200" y="150" dx="-5" dy="5" 
      font-size="24" rotate="20" textLength="100">
        I love <tspan fill="red">D3</tspan>
    </text>

</svg>

码农公寓

相关文章