修改Area.vue中的SVG路径定义
This commit is contained in:
@@ -112,7 +112,7 @@
|
|||||||
</defs>
|
</defs>
|
||||||
|
|
||||||
<!-- 封装所有图形为 symbol(id 用于后续调用) -->
|
<!-- 封装所有图形为 symbol(id 用于后续调用) -->
|
||||||
<symbol id="shared-icon" viewBox="0 0 40 40">
|
<symbol id="shared-border" viewBox="0 0 40 40">
|
||||||
<path
|
<path
|
||||||
fill="#61697E"
|
fill="#61697E"
|
||||||
fill-rule="evenodd"
|
fill-rule="evenodd"
|
||||||
@@ -133,11 +133,9 @@
|
|||||||
fill-rule="evenodd"
|
fill-rule="evenodd"
|
||||||
clip-rule="evenodd"
|
clip-rule="evenodd"
|
||||||
d="M6 7 L7 6 L33 6 L34 7 L34 33 L33 34 L7 34 L6 33 Z" />
|
d="M6 7 L7 6 L33 6 L34 7 L34 33 L33 34 L7 34 L6 33 Z" />
|
||||||
<path
|
</symbol>
|
||||||
fill="#4C5E83"
|
<symbol id="shared-icon" viewBox="0 0 40 40">
|
||||||
fill-rule="evenodd"
|
<use xlink:href="#shared-border" />
|
||||||
clip-rule="evenodd"
|
|
||||||
d="M8 8 L32 8 L32 20 L31 21 L9 21 L8 20 Z" />
|
|
||||||
<path
|
<path
|
||||||
fill="#4C5E83"
|
fill="#4C5E83"
|
||||||
fill-rule="evenodd"
|
fill-rule="evenodd"
|
||||||
@@ -149,6 +147,11 @@
|
|||||||
<!-- 2. 第一个 SVG:不旋转,直接调用共用组件 -->
|
<!-- 2. 第一个 SVG:不旋转,直接调用共用组件 -->
|
||||||
<svg width="41" height="41" viewBox="0 0 40 40" aria-hidden="true">
|
<svg width="41" height="41" viewBox="0 0 40 40" aria-hidden="true">
|
||||||
<use xlink:href="#shared-icon" />
|
<use xlink:href="#shared-icon" />
|
||||||
|
<path
|
||||||
|
fill="#4C5E83"
|
||||||
|
fill-rule="evenodd"
|
||||||
|
clip-rule="evenodd"
|
||||||
|
d="M8 8 L32 8 L32 20 L31 21 L9 21 L8 20 Z" />
|
||||||
<path
|
<path
|
||||||
fill="url(#Area)"
|
fill="url(#Area)"
|
||||||
fill-rule="evenodd"
|
fill-rule="evenodd"
|
||||||
@@ -159,24 +162,58 @@
|
|||||||
<!-- 3. 第二个 SVG:旋转90度,调用同一共用组件 -->
|
<!-- 3. 第二个 SVG:旋转90度,调用同一共用组件 -->
|
||||||
<svg width="41" height="41" viewBox="0 0 40 40" aria-hidden="true">
|
<svg width="41" height="41" viewBox="0 0 40 40" aria-hidden="true">
|
||||||
<use xlink:href="#shared-icon" transform="rotate(90 20 20)" />
|
<use xlink:href="#shared-icon" transform="rotate(90 20 20)" />
|
||||||
|
<path
|
||||||
|
fill="#4C5E83"
|
||||||
|
fill-rule="evenodd"
|
||||||
|
clip-rule="evenodd"
|
||||||
|
d="M19 8 L32 8 L32 31 L31 32 L20 32 L19 31 Z" />
|
||||||
<path
|
<path
|
||||||
fill="url(#Area)"
|
fill="url(#Area)"
|
||||||
fill-rule="evenodd"
|
fill-rule="evenodd"
|
||||||
clip-rule="evenodd"
|
clip-rule="evenodd"
|
||||||
d="M21 14 L30 14 L30 30 L21 30 Z" />
|
d="M21 14 L30 14 L30 30 L21 30 Z" />
|
||||||
</svg>
|
</svg>
|
||||||
<!-- 4. 第二个 SVG:旋转180度,调用同一共用组件 -->
|
<!-- 4. 第三个 SVG:旋转180度,调用同一共用组件 -->
|
||||||
<svg width="41" height="41" viewBox="0 0 40 40" aria-hidden="true">
|
<svg width="41" height="41" viewBox="0 0 40 40" aria-hidden="true">
|
||||||
<use xlink:href="#shared-icon" transform="rotate(180 20 20)" />
|
<use xlink:href="#shared-icon" transform="rotate(180 20 20)" />
|
||||||
|
<path
|
||||||
|
fill="#4C5E83"
|
||||||
|
fill-rule="evenodd"
|
||||||
|
clip-rule="evenodd"
|
||||||
|
d="M8 19 L32 19 L32 31 L31 32 L9 32 L8 31 Z" />
|
||||||
<path
|
<path
|
||||||
fill="url(#Area)"
|
fill="url(#Area)"
|
||||||
fill-rule="evenodd"
|
fill-rule="evenodd"
|
||||||
clip-rule="evenodd"
|
clip-rule="evenodd"
|
||||||
d="M10 24 L30 24 L30 30 L10 30 Z" />
|
d="M10 24 L30 24 L30 30 L10 30 Z" />
|
||||||
</svg>
|
</svg>
|
||||||
<!-- 5. 第二个 SVG:旋转270度,调用同一共用组件 -->
|
<!-- 5. 第四个 SVG:旋转270度,调用同一共用组件 -->
|
||||||
<svg width="41" height="41" viewBox="0 0 40 40" aria-hidden="true">
|
<svg width="41" height="41" viewBox="0 0 40 40" aria-hidden="true">
|
||||||
<use xlink:href="#shared-icon" transform="rotate(270 20 20)" />
|
<use xlink:href="#shared-icon" transform="rotate(270 20 20)" />
|
||||||
|
<path
|
||||||
|
fill="#4C5E83"
|
||||||
|
fill-rule="evenodd"
|
||||||
|
clip-rule="evenodd"
|
||||||
|
d="M8 8 L32 8 L32 20 L31 21 L9 21 L8 20 Z" />
|
||||||
|
<path
|
||||||
|
fill="#4C5E83"
|
||||||
|
fill-rule="evenodd"
|
||||||
|
clip-rule="evenodd"
|
||||||
|
d="M19 8 L32 8 L32 31 L31 32 L20 32 L19 31 Z" />
|
||||||
|
<path
|
||||||
|
fill="url(#Area)"
|
||||||
|
fill-rule="evenodd"
|
||||||
|
clip-rule="evenodd"
|
||||||
|
d="M10 14 L19 14 L19 30 L10 30 Z" />
|
||||||
|
</svg>
|
||||||
|
<!-- 6. 第五个 SVG:正中的按钮,调用同一共用组件 -->
|
||||||
|
<svg width="41" height="41" viewBox="0 0 40 40" aria-hidden="true">
|
||||||
|
<use xlink:href="#shared-border" transform="rotate(270 20 20)" />
|
||||||
|
<path
|
||||||
|
fill="#4C5E83"
|
||||||
|
fill-rule="evenodd"
|
||||||
|
clip-rule="evenodd"
|
||||||
|
d="M8 8 L32 8 L32 20 L31 21 L9 21 L8 20 Z" />
|
||||||
<path
|
<path
|
||||||
fill="url(#Area)"
|
fill="url(#Area)"
|
||||||
fill-rule="evenodd"
|
fill-rule="evenodd"
|
||||||
|
|||||||
Reference in New Issue
Block a user