doc: update document. 9e2961b

jaywcjlove · Dec 5, 2024 · 1c1f52a · 1c1f52a
1 parent aa67c1c
commit 1c1f52a
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 16 deletions.
diff --git a/index.html b/index.html
@@ -183,13 +183,15 @@ <h4 id="how-to-define-colorful-sf-symbols"><a aria-hidden="true" tabindex="-1" h
 </span><span class="code-line line-number" line="11">  <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>g</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Regular-M<span class="token punctuation">"</span></span> <span class="token attr-name">transform</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>matrix(1 0 0 1 2853.78 1556)<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
 </span><span class="code-line line-number" line="12">      <span class="token comment">&#x3C;!-- The shape is in the first multicolor layer, whose fill color is systemBlueColor. 
 </span></span><span class="code-line line-number" line="13"><span class="token comment">        It’s also in the first layer for hierarchical rendering, and the level is primary. --></span>
-</span><span class="code-line line-number" line="14">      <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>path</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>multicolor-0:systemBlueColor hierarchical-1:primary<span class="token punctuation">"</span></span> <span class="token attr-name">d</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>...<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-</span><span class="code-line line-number" line="15">  
-</span><span class="code-line line-number" line="16">      <span class="token comment">&#x3C;!-- Two additional shapes. --></span>
-</span><span class="code-line line-number" line="17">      <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>path</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>multicolor-1:white hierarchical-1:primary<span class="token punctuation">"</span></span> <span class="token attr-name">d</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>...<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-</span><span class="code-line line-number" line="18">      <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>path</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>multicolor-2:tintColor hierarchical-0:tertiary<span class="token punctuation">"</span></span> <span class="token attr-name">d</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>...<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-</span><span class="code-line line-number" line="19">    <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>g</span><span class="token punctuation">></span></span>
-</span><span class="code-line line-number" line="20"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>g</span><span class="token punctuation">></span></span>
+</span><span class="code-line line-number" line="14">      <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>path</span>
+</span></span><span class="code-line line-number" line="15"><span class="token tag">        <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>multicolor-0:systemBlueColor hierarchical-1:primary<span class="token punctuation">"</span></span> <span class="token attr-name">d</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>...<span class="token punctuation">"</span></span>
+</span></span><span class="code-line line-number" line="16"><span class="token tag">      <span class="token punctuation">/></span></span>
+</span><span class="code-line line-number" line="17">  
+</span><span class="code-line line-number" line="18">      <span class="token comment">&#x3C;!-- Two additional shapes. --></span>
+</span><span class="code-line line-number" line="19">      <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>path</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>multicolor-1:white hierarchical-1:primary<span class="token punctuation">"</span></span> <span class="token attr-name">d</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>...<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
+</span><span class="code-line line-number" line="20">      <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>path</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>multicolor-2:tintColor hierarchical-0:tertiary<span class="token punctuation">"</span></span> <span class="token attr-name">d</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>...<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
+</span><span class="code-line line-number" line="21">    <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>g</span><span class="token punctuation">></span></span>
+</span><span class="code-line line-number" line="22"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>g</span><span class="token punctuation">></span></span>
 </span></code><input type="hidden" value="<style>
   .multicolor-0:systemBlueColor { fill:#007AFF; opacity:1.0 }
   .multicolor-1:white { fill:#FFFFFF; opacity:1.0 }
@@ -203,7 +205,9 @@ <h4 id="how-to-define-colorful-sf-symbols"><a aria-hidden="true" tabindex="-1" h
   <g id=&#x22;Regular-M&#x22; transform=&#x22;matrix(1 0 0 1 2853.78 1556)&#x22;>
       <!-- The shape is in the first multicolor layer, whose fill color is systemBlueColor. 
         It’s also in the first layer for hierarchical rendering, and the level is primary. -->
-      <path class=&#x22;multicolor-0:systemBlueColor hierarchical-1:primary&#x22; d=&#x22;...&#x22;>
+      <path
+        class=&#x22;multicolor-0:systemBlueColor hierarchical-1:primary&#x22; d=&#x22;...&#x22;
+      />
   
       <!-- Two additional shapes. -->
       <path class=&#x22;multicolor-1:white hierarchical-1:primary&#x22; d=&#x22;...&#x22;>

diff --git a/index.zh.html b/index.zh.html
@@ -183,13 +183,15 @@ <h4 id="如何定义多彩-sf-符号"><a aria-hidden="true" tabindex="-1" href="
 </span><span class="code-line line-number" line="11">  <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>g</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>Regular-M<span class="token punctuation">"</span></span> <span class="token attr-name">transform</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>matrix(1 0 0 1 2853.78 1556)<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
 </span><span class="code-line line-number" line="12">      <span class="token comment">&#x3C;!-- 形状位于第一个多色图层中，其填充颜色为 systemBlueColor。
 </span></span><span class="code-line line-number" line="13"><span class="token comment">        它也位于分层渲染的第一个图层中，层级为一级。--></span>
-</span><span class="code-line line-number" line="14">      <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>path</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>multicolor-0:systemBlueColor hierarchical-1:primary<span class="token punctuation">"</span></span> <span class="token attr-name">d</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>...<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-</span><span class="code-line line-number" line="15">  
-</span><span class="code-line line-number" line="16">      <span class="token comment">&#x3C;!-- 两个额外的形状。 --></span>
-</span><span class="code-line line-number" line="17">      <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>path</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>multicolor-1:white hierarchical-1:primary<span class="token punctuation">"</span></span> <span class="token attr-name">d</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>...<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-</span><span class="code-line line-number" line="18">      <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>path</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>multicolor-2:tintColor hierarchical-0:tertiary<span class="token punctuation">"</span></span> <span class="token attr-name">d</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>...<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
-</span><span class="code-line line-number" line="19">    <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>g</span><span class="token punctuation">></span></span>
-</span><span class="code-line line-number" line="20"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>g</span><span class="token punctuation">></span></span>
+</span><span class="code-line line-number" line="14">      <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>path</span>
+</span></span><span class="code-line line-number" line="15"><span class="token tag">        <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>multicolor-0:systemBlueColor hierarchical-1:primary<span class="token punctuation">"</span></span> <span class="token attr-name">d</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>...<span class="token punctuation">"</span></span>
+</span></span><span class="code-line line-number" line="16"><span class="token tag">      <span class="token punctuation">/></span></span>
+</span><span class="code-line line-number" line="17">  
+</span><span class="code-line line-number" line="18">      <span class="token comment">&#x3C;!-- 两个额外的形状。 --></span>
+</span><span class="code-line line-number" line="19">      <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>path</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>multicolor-1:white hierarchical-1:primary<span class="token punctuation">"</span></span> <span class="token attr-name">d</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>...<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
+</span><span class="code-line line-number" line="20">      <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span>path</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>multicolor-2:tintColor hierarchical-0:tertiary<span class="token punctuation">"</span></span> <span class="token attr-name">d</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>...<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
+</span><span class="code-line line-number" line="21">    <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>g</span><span class="token punctuation">></span></span>
+</span><span class="code-line line-number" line="22"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span>g</span><span class="token punctuation">></span></span>
 </span></code><input type="hidden" value="<style>
   .multicolor-0:systemBlueColor { fill:#007AFF; opacity:1.0 }
   .multicolor-1:white { fill:#FFFFFF; opacity:1.0 }
@@ -203,7 +205,9 @@ <h4 id="如何定义多彩-sf-符号"><a aria-hidden="true" tabindex="-1" href="
   <g id=&#x22;Regular-M&#x22; transform=&#x22;matrix(1 0 0 1 2853.78 1556)&#x22;>
       <!-- 形状位于第一个多色图层中，其填充颜色为 systemBlueColor。
         它也位于分层渲染的第一个图层中，层级为一级。-->
-      <path class=&#x22;multicolor-0:systemBlueColor hierarchical-1:primary&#x22; d=&#x22;...&#x22;>
+      <path
+        class=&#x22;multicolor-0:systemBlueColor hierarchical-1:primary&#x22; d=&#x22;...&#x22;
+      />
   
       <!-- 两个额外的形状。 -->
       <path class=&#x22;multicolor-1:white hierarchical-1:primary&#x22; d=&#x22;...&#x22;>