import{_ as p}from"./plugin-vue_export-helper-DlAUqK2U.js";import{i as c,a as u,c as i,b as t,e as a,f as n,g as r,l as e,h as o}from"./app-CBehpE2h.js";const d={},k={href:"https://developer.mozilla.org/zh-CN/docs/Web/SVG",target:"_blank",rel:"noopener noreferrer"},g=t("p",null,"本文介绍了SVG的一些基础语法",-1),h=o(`<h2 id="在html中使用svg" tabindex="-1"><a class="header-anchor" href="#在html中使用svg"><span>在<code>html</code>中使用<code>svg</code></span></a></h2><div class="language-html line-numbers-mode" data-ext="html" data-title="html"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>svg</span> <span class="token attr-name">xmlns</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>http://www.w3.org/2000/svg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">viewBox</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>0 0 100 100<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>svg</span><span class="token punctuation">&gt;</span></span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><p>xmlns属性：SVG命名空间</p><h2 id="视口-viewport-和视图框-viewbox" tabindex="-1"><a class="header-anchor" href="#视口-viewport-和视图框-viewbox"><span>视口(Viewport)和视图框(ViewBox)</span></a></h2><h3 id="视口-viewport" tabindex="-1"><a class="header-anchor" href="#视口-viewport"><span>视口(Viewport)</span></a></h3><p>属性<code>width</code>和<code>height</code>，表示SVG图像的宽高</p><h3 id="视图框-viewbox" tabindex="-1"><a class="header-anchor" href="#视图框-viewbox"><span>视图框(ViewBox)</span></a></h3><p>属性<code>viewBox</code>，SVG空间的视口空间</p><blockquote><p>例如：<code>viewBox=&quot;0 0 100 200&quot;</code>表示从SVG图像显示坐标系<code>(0, 0)</code>开始<strong>宽度</strong>100单位，<strong>高度</strong>200单位的矩形空间</p></blockquote><div class="hint-container warning"><p class="hint-container-title">注意</p><p><code>viewBox</code>中的后两位数<strong>并不表示坐标</strong>，而是代表<strong>长宽</strong></p></div><h2 id="常用形状元素" tabindex="-1"><a class="header-anchor" href="#常用形状元素"><span>常用形状元素</span></a></h2><h3 id="rect-矩形" tabindex="-1"><a class="header-anchor" href="#rect-矩形"><span>&lt;rect&gt; 矩形</span></a></h3><table><thead><tr><th>属性</th><th>描述</th></tr></thead><tbody><tr><td>x, y</td><td>左上角坐标</td></tr><tr><td>width, height</td><td>矩形宽高</td></tr><tr><td>rx, ry</td><td>圆角半径</td></tr></tbody></table>`,13),m=t("div",{class:"language-html line-numbers-mode","data-ext":"html","data-title":"html"},[t("pre",{class:"language-html"},[t("code",null,[t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),a("svg")]),a("  "),t("span",{class:"token attr-name"},"xmlns"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),a("http://www.w3.org/2000/svg"),t("span",{class:"token punctuation"},'"')]),a(),t("span",{class:"token attr-name"},"viewBox"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),a("0 0 100 100"),t("span",{class:"token punctuation"},'"')]),a(),t("span",{class:"token attr-name"},"width"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),a("200"),t("span",{class:"token punctuation"},'"')]),a(),t("span",{class:"token attr-name"},"height"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),a("200"),t("span",{class:"token punctuation"},'"')]),t("span",{class:"token punctuation"},">")]),a(`
  `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),a("rect")]),a(),t("span",{class:"token attr-name"},"x"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),a("10"),t("span",{class:"token punctuation"},'"')]),a(),t("span",{class:"token attr-name"},"y"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),a("10"),t("span",{class:"token punctuation"},'"')]),a(),t("span",{class:"token attr-name"},"width"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),a("50"),t("span",{class:"token punctuation"},'"')]),a(),t("span",{class:"token attr-name"},"height"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),a("50"),t("span",{class:"token punctuation"},'"')]),a(),t("span",{class:"token special-attr"},[t("span",{class:"token attr-name"},"style"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),t("span",{class:"token value css language-css"},[t("span",{class:"token property"},"stroke"),t("span",{class:"token punctuation"},":"),a("#000"),t("span",{class:"token punctuation"},";"),a(),t("span",{class:"token property"},"fill"),t("span",{class:"token punctuation"},":"),a("#42b883"),t("span",{class:"token punctuation"},";")]),t("span",{class:"token punctuation"},'"')])]),a(),t("span",{class:"token punctuation"},"/>")]),a(`
`),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),a("svg")]),t("span",{class:"token punctuation"},">")]),a(`
`)])]),t("div",{class:"line-numbers","aria-hidden":"true"},[t("div",{class:"line-number"}),t("div",{class:"line-number"}),t("div",{class:"line-number"})])],-1),v=t("div",{class:"language-html line-numbers-mode","data-ext":"html","data-title":"html"},[t("pre",{class:"language-html"},[t("code",null,[t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),a("svg")]),a("  "),t("span",{class:"token attr-name"},"xmlns"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),a("http://www.w3.org/2000/svg"),t("span",{class:"token punctuation"},'"')]),a(),t("span",{class:"token attr-name"},"viewBox"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),a("0 0 100 100"),t("span",{class:"token punctuation"},'"')]),a(),t("span",{class:"token attr-name"},"width"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),a("200"),t("span",{class:"token punctuation"},'"')]),a(),t("span",{class:"token attr-name"},"height"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),a("200"),t("span",{class:"token punctuation"},'"')]),t("span",{class:"token punctuation"},">")]),a(`
  `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),a("rect")]),a(),t("span",{class:"token attr-name"},"x"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),a("10"),t("span",{class:"token punctuation"},'"')]),a(),t("span",{class:"token attr-name"},"y"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),a("10"),t("span",{class:"token punctuation"},'"')]),a(),t("span",{class:"token attr-name"},"width"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),a("50"),t("span",{class:"token punctuation"},'"')]),a(),t("span",{class:"token attr-name"},"height"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),a("50"),t("span",{class:"token punctuation"},'"')]),a(),t("span",{class:"token attr-name"},"rx"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),a("10"),t("span",{class:"token punctuation"},'"')]),a(),t("span",{class:"token attr-name"},"ry"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),a("10"),t("span",{class:"token punctuation"},'"')]),a(),t("span",{class:"token special-attr"},[t("span",{class:"token attr-name"},"style"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),t("span",{class:"token value css language-css"},[t("span",{class:"token property"},"stroke"),t("span",{class:"token punctuation"},":"),a("#000"),t("span",{class:"token punctuation"},";"),a(),t("span",{class:"token property"},"fill"),t("span",{class:"token punctuation"},":"),a("#42b883"),t("span",{class:"token punctuation"},";")]),t("span",{class:"token punctuation"},'"')])]),a(),t("span",{class:"token punctuation"},"/>")]),a(`
`),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),a("svg")]),t("span",{class:"token punctuation"},">")]),a(`
`)])]),t("div",{class:"line-numbers","aria-hidden":"true"},[t("div",{class:"line-number"}),t("div",{class:"line-number"}),t("div",{class:"line-number"})])],-1),y=o('<h3 id="circle-圆形" tabindex="-1"><a class="header-anchor" href="#circle-圆形"><span>&lt;circle&gt; 圆形</span></a></h3><table><thead><tr><th>属性</th><th>描述</th></tr></thead><tbody><tr><td>cx, cy</td><td>圆心坐标</td></tr><tr><td>r</td><td>半径</td></tr></tbody></table>',2),b=t("div",{class:"language-html line-numbers-mode","data-ext":"html","data-title":"html"},[t("pre",{class:"language-html"},[t("code",null,[t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),a("svg")]),a("  "),t("span",{class:"token attr-name"},"xmlns"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),a("http://www.w3.org/2000/svg"),t("span",{class:"token punctuation"},'"')]),a(),t("span",{class:"token attr-name"},"viewBox"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),a("0 0 100 100"),t("span",{class:"token punctuation"},'"')]),a(),t("span",{class:"token attr-name"},"width"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),a("200"),t("span",{class:"token punctuation"},'"')]),a(),t("span",{class:"token attr-name"},"height"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),a("200"),t("span",{class:"token punctuation"},'"')]),t("span",{class:"token punctuation"},">")]),a(`
  `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),a("circle")]),a(),t("span",{class:"token attr-name"},"cx"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),a("30"),t("span",{class:"token punctuation"},'"')]),a(),t("span",{class:"token attr-name"},"cy"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),a("30"),t("span",{class:"token punctuation"},'"')]),a(),t("span",{class:"token attr-name"},"r"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),a("20"),t("span",{class:"token punctuation"},'"')]),a(),t("span",{class:"token special-attr"},[t("span",{class:"token attr-name"},"style"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),t("span",{class:"token value css language-css"},[t("span",{class:"token property"},"stroke"),t("span",{class:"token punctuation"},":"),a("#000"),t("span",{class:"token punctuation"},";"),a(),t("span",{class:"token property"},"fill"),t("span",{class:"token punctuation"},":"),a("#42b883"),t("span",{class:"token punctuation"},";")]),t("span",{class:"token punctuation"},'"')])]),a(),t("span",{class:"token punctuation"},"/>")]),a(`
`),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),a("svg")]),t("span",{class:"token punctuation"},">")]),a(`
`)])]),t("div",{class:"line-numbers","aria-hidden":"true"},[t("div",{class:"line-number"}),t("div",{class:"line-number"}),t("div",{class:"line-number"})])],-1),x=o('<h3 id="ellipse-椭圆" tabindex="-1"><a class="header-anchor" href="#ellipse-椭圆"><span>&lt;ellipse&gt; 椭圆</span></a></h3><table><thead><tr><th>属性</th><th>描述</th></tr></thead><tbody><tr><td>cx, cy</td><td>圆心坐标</td></tr><tr><td>rx, ry</td><td>横纵半径</td></tr></tbody></table>',2),w=t("div",{class:"language-html line-numbers-mode","data-ext":"html","data-title":"html"},[t("pre",{class:"language-html"},[t("code",null,[t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),a("svg")]),a("  "),t("span",{class:"token attr-name"},"xmlns"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),a("http://www.w3.org/2000/svg"),t("span",{class:"token punctuation"},'"')]),a(),t("span",{class:"token attr-name"},"viewBox"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),a("0 0 100 100"),t("span",{class:"token punctuation"},'"')]),a(),t("span",{class:"token attr-name"},"width"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),a("200"),t("span",{class:"token punctuation"},'"')]),a(),t("span",{class:"token attr-name"},"height"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),a("200"),t("span",{class:"token punctuation"},'"')]),t("span",{class:"token punctuation"},">")]),a(`
  `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),a("ellipse")]),a(),t("span",{class:"token attr-name"},"cx"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),a("30"),t("span",{class:"token punctuation"},'"')]),a(),t("span",{class:"token attr-name"},"cy"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),a("30"),t("span",{class:"token punctuation"},'"')]),a(),t("span",{class:"token attr-name"},"rx"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),a("20"),t("span",{class:"token punctuation"},'"')]),a(),t("span",{class:"token attr-name"},"ry"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),a("10"),t("span",{class:"token punctuation"},'"')]),a(),t("span",{class:"token special-attr"},[t("span",{class:"token attr-name"},"style"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),t("span",{class:"token value css language-css"},[t("span",{class:"token property"},"stroke"),t("span",{class:"token punctuation"},":"),a("#000"),t("span",{class:"token punctuation"},";"),a(),t("span",{class:"token property"},"fill"),t("span",{class:"token punctuation"},":"),a("#42b883"),t("span",{class:"token punctuation"},";")]),t("span",{class:"token punctuation"},'"')])]),a(),t("span",{class:"token punctuation"},"/>")]),a(`
`),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),a("svg")]),t("span",{class:"token punctuation"},">")]),a(`
`)])]),t("div",{class:"line-numbers","aria-hidden":"true"},[t("div",{class:"line-number"}),t("div",{class:"line-number"}),t("div",{class:"line-number"})])],-1),_=o('<h3 id="line-直线" tabindex="-1"><a class="header-anchor" href="#line-直线"><span>&lt;line&gt; 直线</span></a></h3><table><thead><tr><th>属性</th><th>描述</th></tr></thead><tbody><tr><td>x1, y1</td><td>起点坐标</td></tr><tr><td>x2, y2</td><td>终点坐标</td></tr></tbody></table>',2),q=t("div",{class:"language-html line-numbers-mode","data-ext":"html","data-title":"html"},[t("pre",{class:"language-html"},[t("code",null,[t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),a("svg")]),a("  "),t("span",{class:"token attr-name"},"xmlns"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),a("http://www.w3.org/2000/svg"),t("span",{class:"token punctuation"},'"')]),a(),t("span",{class:"token attr-name"},"viewBox"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),a("0 0 100 100"),t("span",{class:"token punctuation"},'"')]),a(),t("span",{class:"token attr-name"},"width"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),a("200"),t("span",{class:"token punctuation"},'"')]),a(),t("span",{class:"token attr-name"},"height"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),a("200"),t("span",{class:"token punctuation"},'"')]),t("span",{class:"token punctuation"},">")]),a(`
  `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),a("line")]),a(),t("span",{class:"token attr-name"},"x1"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),a("0"),t("span",{class:"token punctuation"},'"')]),a(),t("span",{class:"token attr-name"},"y1"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),a("100"),t("span",{class:"token punctuation"},'"')]),a(),t("span",{class:"token attr-name"},"x2"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),a("100"),t("span",{class:"token punctuation"},'"')]),a(),t("span",{class:"token attr-name"},"y2"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),a("0"),t("span",{class:"token punctuation"},'"')]),a(),t("span",{class:"token special-attr"},[t("span",{class:"token attr-name"},"style"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),t("span",{class:"token value css language-css"},[t("span",{class:"token property"},"stroke"),t("span",{class:"token punctuation"},":"),a("#000"),t("span",{class:"token punctuation"},";")]),t("span",{class:"token punctuation"},'"')])]),a(),t("span",{class:"token punctuation"},"/>")]),a(`
`),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),a("svg")]),t("span",{class:"token punctuation"},">")]),a(`
`)])]),t("div",{class:"line-numbers","aria-hidden":"true"},[t("div",{class:"line-number"}),t("div",{class:"line-number"}),t("div",{class:"line-number"})])],-1),f=o('<h3 id="polyline-折线" tabindex="-1"><a class="header-anchor" href="#polyline-折线"><span>&lt;polyline&gt; 折线</span></a></h3><table><thead><tr><th>属性</th><th>描述</th></tr></thead><tbody><tr><td>points</td><td>折线坐标（以空格分隔每个坐标，以<code>,</code>分隔<code>x</code>与<code>y</code>）</td></tr></tbody></table>',2),E=t("div",{class:"language-html line-numbers-mode","data-ext":"html","data-title":"html"},[t("pre",{class:"language-html"},[t("code",null,[t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),a("svg")]),a("  "),t("span",{class:"token attr-name"},"xmlns"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),a("http://www.w3.org/2000/svg"),t("span",{class:"token punctuation"},'"')]),a(),t("span",{class:"token attr-name"},"viewBox"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),a("0 0 100 100"),t("span",{class:"token punctuation"},'"')]),a(),t("span",{class:"token attr-name"},"width"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),a("200"),t("span",{class:"token punctuation"},'"')]),a(),t("span",{class:"token attr-name"},"height"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),a("200"),t("span",{class:"token punctuation"},'"')]),t("span",{class:"token punctuation"},">")]),a(`
  `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),a("polyline")]),a(),t("span",{class:"token attr-name"},"points"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),a("0,10 50,100 100,10"),t("span",{class:"token punctuation"},'"')]),a(),t("span",{class:"token special-attr"},[t("span",{class:"token attr-name"},"style"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),t("span",{class:"token value css language-css"},[t("span",{class:"token property"},"stroke"),t("span",{class:"token punctuation"},":"),a("#000"),t("span",{class:"token punctuation"},";"),a(),t("span",{class:"token property"},"fill"),t("span",{class:"token punctuation"},":"),a("#42b883"),t("span",{class:"token punctuation"},";")]),t("span",{class:"token punctuation"},'"')])]),a(),t("span",{class:"token punctuation"},"/>")]),a(`
`),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),a("svg")]),t("span",{class:"token punctuation"},">")]),a(`
`)])]),t("div",{class:"line-numbers","aria-hidden":"true"},[t("div",{class:"line-number"}),t("div",{class:"line-number"}),t("div",{class:"line-number"})])],-1),V=o('<h3 id="polygon-多边形" tabindex="-1"><a class="header-anchor" href="#polygon-多边形"><span>&lt;polygon&gt; 多边形</span></a></h3><table><thead><tr><th>属性</th><th>描述</th></tr></thead><tbody><tr><td>points</td><td>折线坐标</td></tr></tbody></table><div class="hint-container info"><p class="hint-container-title">提示</p><p>规范上：以 <em>空格</em> 分隔每个坐标，以<code>,</code>分隔<code>x</code>与<code>y</code>。<br> 但实际上： <em>空格</em> 与 <code>,</code> 并无区别。</p></div>',3),z=t("div",{class:"language-html line-numbers-mode","data-ext":"html","data-title":"html"},[t("pre",{class:"language-html"},[t("code",null,[t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),a("svg")]),a("  "),t("span",{class:"token attr-name"},"xmlns"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),a("http://www.w3.org/2000/svg"),t("span",{class:"token punctuation"},'"')]),a(),t("span",{class:"token attr-name"},"viewBox"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),a("0 0 100 100"),t("span",{class:"token punctuation"},'"')]),a(),t("span",{class:"token attr-name"},"width"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),a("200"),t("span",{class:"token punctuation"},'"')]),a(),t("span",{class:"token attr-name"},"height"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),a("200"),t("span",{class:"token punctuation"},'"')]),t("span",{class:"token punctuation"},">")]),a(`
  `),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"<"),a("polygon")]),a(),t("span",{class:"token attr-name"},"points"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),a("0,10 50,100 100,10"),t("span",{class:"token punctuation"},'"')]),a(),t("span",{class:"token special-attr"},[t("span",{class:"token attr-name"},"style"),t("span",{class:"token attr-value"},[t("span",{class:"token punctuation attr-equals"},"="),t("span",{class:"token punctuation"},'"'),t("span",{class:"token value css language-css"},[t("span",{class:"token property"},"stroke"),t("span",{class:"token punctuation"},":"),a("#000"),t("span",{class:"token punctuation"},";"),a(),t("span",{class:"token property"},"fill"),t("span",{class:"token punctuation"},":"),a("#42b883"),t("span",{class:"token punctuation"},";")]),t("span",{class:"token punctuation"},'"')])]),a(),t("span",{class:"token punctuation"},"/>")]),a(`
`),t("span",{class:"token tag"},[t("span",{class:"token tag"},[t("span",{class:"token punctuation"},"</"),a("svg")]),t("span",{class:"token punctuation"},">")]),a(`
`)])]),t("div",{class:"line-numbers","aria-hidden":"true"},[t("div",{class:"line-number"}),t("div",{class:"line-number"}),t("div",{class:"line-number"})])],-1),B=o('<div class="hint-container info"><p class="hint-container-title">提示</p><p><strong>&lt;polyline&gt;(折线)</strong> 与 <strong>&lt;polygon&gt;(多边形)</strong> 的区别：<br> &lt;polyline&gt;(折线)不会自动闭合图形，&lt;polygon&gt;(多边形)会自动闭合图形</p></div><h3 id="path-任意路径" tabindex="-1"><a class="header-anchor" href="#path-任意路径"><span>&lt;path&gt; 任意路径</span></a></h3><table><thead><tr><th>属性</th><th>描述</th></tr></thead><tbody><tr><td>d</td><td>路径命令</td></tr></tbody></table><table><thead><tr><th>路径命令</th><th>描述</th></tr></thead><tbody><tr><td>大写字母</td><td><strong>绝对</strong>坐标</td></tr><tr><td>小写字母</td><td><strong>相对</strong>坐标（相对于 <em>当前位置</em>）</td></tr><tr><td><code>M x,y</code></td><td>向点<code>(x, y)</code><strong>移动画笔</strong></td></tr><tr><td><code>m dx,dy</code></td><td>向相对位置<code>(dx, dy)</code><strong>移动画笔</strong></td></tr><tr><td><code>L x,y</code></td><td>从 <em>当前位置</em> 向点<code>(x, y)</code><strong>绘制线段</strong></td></tr><tr><td><code>l dx,dy</code></td><td>向 <em>当前位置</em> 的相对位置<code>(dx, dy)</code><strong>绘制线段</strong></td></tr><tr><td><code>H x</code></td><td>从 <em>当前位置</em> <strong>绘制水平线</strong>至<code>x</code>处</td></tr><tr><td><code>h dx</code></td><td>向相对位置<code>dx</code><strong>绘制水平线</strong></td></tr><tr><td><code>V y</code></td><td>从 <em>当前位置</em> <strong>绘制垂直线</strong>至<code>y</code>处</td></tr><tr><td><code>v dy</code></td><td>向 相对位置<code>dy</code><strong>绘制垂直线</strong></td></tr><tr><td><code>A rx,ry x-axis-rotation large-arc-flag sweep-flag x,y</code></td><td><code>rx</code>,<code>ry</code>：<strong>椭圆</strong>半径；<code>x-axis-rotation</code>：旋转（弧度）；<code>large-arc-flag</code>：劣弧<code>0</code>，优弧<code>1</code>；<code>sweep-flag</code>：逆时针<code>0</code>，顺时针<code>1</code>；<code>x</code>,<code>y</code>终点坐标</td></tr><tr><td><code>a rx,ry x-axis-rotation large-arc-flag sweep-flag dx,dy</code></td><td><code>rx</code>,<code>ry</code>：<strong>椭圆</strong>半径；<code>x-axis-rotation</code>：旋转（弧度）；<code>large-arc-flag</code>：劣弧<code>0</code>，优弧<code>1</code>；<code>sweep-flag</code>：逆时针<code>0</code>，顺时针<code>1</code>；<code>dx</code>,<code>dy</code>终点相对坐标</td></tr><tr><td><code>Q x1,y1 x,y</code></td><td>以 <em>当前位置</em> 为起点，<code>(x1, y1)</code>为控制点，<code>(x, y)</code>为终点绘制<strong>二次贝塞尔曲线</strong></td></tr><tr><td><code>q dx1,dy1 dx,dy</code></td><td>以 <em>当前位置</em> 为起点，相对位置<code>(dx1, dy1)</code>为控制点，相对位置<code>(dx, dy)</code>为终点绘制<strong>二次贝塞尔曲线</strong></td></tr><tr><td><code>T x,y</code></td><td>通过上一个二次贝赛尔曲线命令的控制点推算出控制点，以<code>(x, y)</code>为终点绘制<strong>二次贝赛尔曲线</strong></td></tr><tr><td><code>t dx,dy</code></td><td>通过上一个二次贝赛尔曲线命令的控制点推算出控制点，以相对位置<code>(dx, dy)</code>为终点绘制<strong>二次贝赛尔曲线</strong></td></tr><tr><td><code>C x1,y1 x2,y2 x,y</code></td><td>以 <em>当前位置</em> 为起点，<code>(x1, y1)</code>为起点控制点，<code>(x2, y2)</code>为终点控制点，<code>(x, y)</code>为终点绘制<strong>三次贝塞尔曲线</strong></td></tr><tr><td><code>c dx1,dy1 dx2,dy2 dx,dy</code></td><td>以 <em>当前位置</em> 为起点，相对位置<code>(dx1, dy1)</code>为起点控制点，<code>(dx2, dy2)</code>为终点控制点，<code>(dx, dy)</code>为终点绘制<strong>三次贝塞尔曲线</strong></td></tr><tr><td><code>S x2,y2 x,y</code></td><td>通过上一个三次贝赛尔曲线命令的终点控制点推算出起点控制点，以<code>(x2, y2)</code>为终点控制点，<code>(x, y)</code>为终点绘制<strong>三次贝赛尔曲线</strong></td></tr><tr><td><code>s dx2,dy2 dx,dy</code></td><td>通过上一个三次贝赛尔曲线命令的终点控制点推算出起点控制点，以相对位置<code>(dx2, dy2)</code>为终点控制点，<code>(dx, dy)</code>为终点绘制<strong>三次贝赛尔曲线</strong></td></tr><tr><td><code>Z</code> 或 <code>z</code></td><td><strong>闭合</strong>路径</td></tr></tbody></table><figure><img src="https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial/Paths/svgarcs_flags.png" alt="椭圆弧large-arc-flag和sweep-flag命令图解（左上角起点，右下角终点）" tabindex="0" loading="lazy"><figcaption>椭圆弧large-arc-flag和sweep-flag命令图解（左上角起点，右下角终点）</figcaption></figure><figure><img src="https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial/Paths/quadratic_bezier_with_grid.png" alt="二次贝赛尔曲线(Q/q)" tabindex="0" loading="lazy"><figcaption>二次贝赛尔曲线(Q/q)</figcaption></figure><figure><img src="https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial/Paths/shortcut_quadratic_bezier_with_grid.png" alt="自动平滑的二次贝赛尔曲线(T/t)" tabindex="0" loading="lazy"><figcaption>自动平滑的二次贝赛尔曲线(T/t)</figcaption></figure><figure><img src="https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial/Paths/cubic_bezier_curves_with_grid.png" alt="三次贝赛尔曲线(C/c)" tabindex="0" loading="lazy"><figcaption>三次贝赛尔曲线(C/c)</figcaption></figure><figure><img src="https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial/Paths/shortcut_cubic_bezier_with_grid.png" alt="自动平滑的三次贝赛尔曲线(S/s)" tabindex="0" loading="lazy"><figcaption>自动平滑的三次贝赛尔曲线(S/s)</figcaption></figure><div class="hint-container info"><p class="hint-container-title">提示</p><p><strong>&lt;polyline&gt;(折线)</strong> 与 <strong>&lt;polygon&gt;(多边形)</strong> 的区别：<br> &lt;polyline&gt;(折线)不会自动闭合图形，&lt;polygon&gt;(多边形)会自动闭合图形</p></div>',10);function T(A,C){const l=c("ExternalLinkIcon"),s=c("CodeDemo");return u(),i("div",null,[t("p",null,[t("a",k,[a("SVG (Scalable Vector Graphics) 可伸缩矢量图形"),n(l)]),a("是一种不随放大缩小而失真的矢量图形格式")]),g,r(" more "),h,n(s,{id:"code-demo-83",type:"normal",title:"%E7%9F%A9%E5%BD%A2",code:"eJxVjsEOgjAQRH9lU+60gCakoAe/g5NaaWOhpt1QiPHf3ZL0wGGzO5M3m/kyjZNlkvVhGQHWyc7hMpCJH8l5jLGMTen8yGshBCdmYLAYFW9uJUyAgErsQ340T9TkEkpKKzNqzPI6zAC9Vw+EFKwSseUjB8+H3K4CblaRCOjdW8mCWnTwMtbK4lTf27bpCOL0vU/laLPfH0K2Poo="},{default:e(()=>[m]),_:1}),n(s,{id:"code-demo-86",type:"normal",title:"%E5%9C%86%E8%A7%92%E7%9F%A9%E5%BD%A2",code:"eJxVjsEKgzAQRH9liXcTtQWJtod+h6e2qQmNWpLFKKX/3o0QwcOyO8Mbdr5M42CZZK2fe4BlsKO/dGTiR3IeQshDlU+u56UQghPTMZiNCrdpIUyAgEJsQ34wT9TkEkpKK9NrTPLajQCtUw+EGCwisaYjBc+H3KbcTrsd97haRcKjm95KZtSsgZexVman8l7XVUMQp49tLEyb/f42Y0PT"},{default:e(()=>[v]),_:1}),y,n(s,{id:"code-demo-122",type:"normal",title:"%E5%9C%86%E5%BD%A2",code:"eJw1js0OgyAQhF9lg3eh2oNB20Ofw1MpFVLUBohomr67g4mHzc5Mvv35MRNHxyTrwjIQraObwq1HGL+S85RSmepy9gOvhBAcTM9osTo95hWYIEEXcRTyZF/RIAUKZ7QdTDztvZ+IOmW9cppUnq0zpLZT+YOECHFzGiZEP3+0LHC3pbd1ThbX6tk0dQuIY1+X30Fn/x3yYzow"},{default:e(()=>[b]),_:1}),x,n(s,{id:"code-demo-158",type:"normal",title:"%E6%A4%AD%E5%9C%86",code:"eJw1jkEOgyAQRa8ywb2gdmHQdtFzuKqlQDqKASKapnd3MHFB+P/lzWR+zMQJmWR9WDXANuEc7gPBuEjOU0plakrnNa+FEJycgcFqVXq6jTQBAipxPuLJvqMhSio1o6w28aqPYQboFaJdgoIxDzfZGvcr+czqM2VW5RTijopKiN59lSzohg4+FlEWt/rVtk1HEqfdfT6NfvY/AM19Pck="},{default:e(()=>[w]),_:1}),_,n(s,{id:"code-demo-194",type:"normal",title:"%E7%9B%B4%E7%BA%BF",code:"eJw9jsEOwiAQRH9lg/dC6w3Rg9/BUQJECqaQAjH+u4NGD5t9O5nZzJO5sgYmmcq7JWpriPmsIZaH5LzWOtXjlDbLFyEEh0cz2r2p19RgEyRoFp+BXv2tOKiw4nLGW1d+50VHIhV8NNTmkYSjD/hG2/LHPnBALj0YcC5buht5QIETZI5XajTBZq83iCE3zg=="},{default:e(()=>[q]),_:1}),f,n(s,{id:"code-demo-222",type:"normal",title:"%E6%8A%98%E7%BA%BF%EF%BC%88%E6%9C%AA%E9%97%AD%E5%90%88%EF%BC%89",code:"eJw1TtEOgjAM/JVmvBpWQBMy0Ae/gyfjZItjI6xhEOO/25H40DZ3vd71IwxNTijRx3UE2Cbn43VgkmYlZUqpTE0ZllHWiChZMwhYrU73sLEMAaHCo5hP9kmGWZYyMtqOhv7wNniAfg5ud9ZrmIP1lIPwVCFccj9cePJppN1pXkZawlurgqM7eFnnVHGuH23bdCySbNnnj3iK7w+yNzsB"},{default:e(()=>[E]),_:1}),V,n(s,{id:"code-demo-255",type:"normal",title:"%E6%8A%98%E7%BA%BF%EF%BC%88%E9%97%AD%E5%90%88%EF%BC%89",code:"eJw1TtEOgjAM/JVmvBpWQBMy0Ae/gyfj3BbHRljDIMZ/t5D40DZ3vd71IyyNXijRp8UArKMP6TowSZOSMudc5qaMs5E1IkrWDAIWp/M9rixDQKjwKOaze5JllqWMrHbG0h/ehgDQT9FvJgaYogu05+CpQrjs/TDhyZeJNq95mWiOb60KTu7g5bxXxbl+tG3TsUiyY78/xFN8f24rOp0="},{default:e(()=>[z]),_:1}),B])}const N=p(d,[["render",T],["__file","基础图形.html.vue"]]),j=JSON.parse('{"path":"/posts/%E8%AF%AD%E8%A8%80/SVG/%E5%9F%BA%E7%A1%80%E5%9B%BE%E5%BD%A2.html","title":"SVG - 基础图形","lang":"zh-CN","frontmatter":{"title":"SVG - 基础图形","cover":"/assets/images/cover17.jpg","icon":"iconoir:svg-format","order":17,"author":"Kamimika","date":"2024-06-30T00:00:00.000Z","category":["SVG"],"tag":["笔记"],"star":true,"description":"SVG (Scalable Vector Graphics) 可伸缩矢量图形是一种不随放大缩小而失真的矢量图形格式 本文介绍了SVG的一些基础语法","head":[["meta",{"property":"og:url","content":"https://kamimika.top/posts/%E8%AF%AD%E8%A8%80/SVG/%E5%9F%BA%E7%A1%80%E5%9B%BE%E5%BD%A2.html"}],["meta",{"property":"og:site_name","content":"Kamimika 的个人小站"}],["meta",{"property":"og:title","content":"SVG - 基础图形"}],["meta",{"property":"og:description","content":"SVG (Scalable Vector Graphics) 可伸缩矢量图形是一种不随放大缩小而失真的矢量图形格式 本文介绍了SVG的一些基础语法"}],["meta",{"property":"og:type","content":"article"}],["meta",{"property":"og:image","content":"https://kamimika.top/assets/images/cover17.jpg"}],["meta",{"property":"og:locale","content":"zh-CN"}],["meta",{"property":"og:updated_time","content":"2024-07-21T10:38:51.000Z"}],["meta",{"name":"twitter:card","content":"summary_large_image"}],["meta",{"name":"twitter:image:src","content":"https://kamimika.top/assets/images/cover17.jpg"}],["meta",{"name":"twitter:image:alt","content":"SVG - 基础图形"}],["meta",{"property":"article:author","content":"Kamimika"}],["meta",{"property":"article:tag","content":"笔记"}],["meta",{"property":"article:published_time","content":"2024-06-30T00:00:00.000Z"}],["meta",{"property":"article:modified_time","content":"2024-07-21T10:38:51.000Z"}],["script",{"type":"application/ld+json"},"{\\"@context\\":\\"https://schema.org\\",\\"@type\\":\\"Article\\",\\"headline\\":\\"SVG - 基础图形\\",\\"image\\":[\\"https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial/Paths/svgarcs_flags.png\\",\\"https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial/Paths/quadratic_bezier_with_grid.png\\",\\"https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial/Paths/shortcut_quadratic_bezier_with_grid.png\\",\\"https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial/Paths/cubic_bezier_curves_with_grid.png\\",\\"https://developer.mozilla.org/zh-CN/docs/Web/SVG/Tutorial/Paths/shortcut_cubic_bezier_with_grid.png\\"],\\"datePublished\\":\\"2024-06-30T00:00:00.000Z\\",\\"dateModified\\":\\"2024-07-21T10:38:51.000Z\\",\\"author\\":[{\\"@type\\":\\"Person\\",\\"name\\":\\"Kamimika\\"}]}"]]},"headers":[{"level":2,"title":"在html中使用svg","slug":"在html中使用svg","link":"#在html中使用svg","children":[]},{"level":2,"title":"视口(Viewport)和视图框(ViewBox)","slug":"视口-viewport-和视图框-viewbox","link":"#视口-viewport-和视图框-viewbox","children":[{"level":3,"title":"视口(Viewport)","slug":"视口-viewport","link":"#视口-viewport","children":[]},{"level":3,"title":"视图框(ViewBox)","slug":"视图框-viewbox","link":"#视图框-viewbox","children":[]}]},{"level":2,"title":"常用形状元素","slug":"常用形状元素","link":"#常用形状元素","children":[{"level":3,"title":"<rect> 矩形","slug":"rect-矩形","link":"#rect-矩形","children":[]},{"level":3,"title":"<circle> 圆形","slug":"circle-圆形","link":"#circle-圆形","children":[]},{"level":3,"title":"<ellipse> 椭圆","slug":"ellipse-椭圆","link":"#ellipse-椭圆","children":[]},{"level":3,"title":"<line> 直线","slug":"line-直线","link":"#line-直线","children":[]},{"level":3,"title":"<polyline> 折线","slug":"polyline-折线","link":"#polyline-折线","children":[]},{"level":3,"title":"<polygon> 多边形","slug":"polygon-多边形","link":"#polygon-多边形","children":[]},{"level":3,"title":"<path> 任意路径","slug":"path-任意路径","link":"#path-任意路径","children":[]}]}],"git":{"createdTime":1720089961000,"updatedTime":1721558331000,"contributors":[{"name":"wzh656","email":"1826632591@qq.com","commits":3}]},"readingTime":{"minutes":5.11,"words":1533},"filePathRelative":"posts/语言/SVG/基础图形.md","localizedDate":"2024年6月30日","excerpt":"<p><a href=\\"https://developer.mozilla.org/zh-CN/docs/Web/SVG\\" target=\\"_blank\\" rel=\\"noopener noreferrer\\">SVG (Scalable Vector Graphics) 可伸缩矢量图形</a>是一种不随放大缩小而失真的矢量图形格式</p>\\n<p>本文介绍了SVG的一些基础语法</p>\\n","autoDesc":true}');export{N as comp,j as data};