SVG CSS 样式
SVG 元素类似于 HTML 元素，可以被 CSS 选择器定位，并使用标准 SVG 属性作为 CSS 属性进行样式修改。这会覆盖 SVG 中定义的任何属性，因为 CSS 的优先级更高
- CSS 样式可以在任意数量的页面上重用
- 整个 SVG 或图像的各个元素可以使用
:hover、transition、animation等应用 CSS 效果
<svg
xmlns="http://www.w3.org/2000/svg"
width="612"
height="502.174"
viewBox="0 65.326 612 502.174"
className="bg-red-300 hover:bg-blue-200"
></svg>
当鼠标画过的时候 会发现背景变成蓝色 CSS 样式可以直接用到svg属性上
样式放置在 <svg> 标签中的 <style></style>
加上[CDATA[ ... ]] 同理也可以将样式放入到HTML 的 <style> 元素
<svg class="star" viewBox="0 0 1024 1024" width="256" height="256" xmlns="http://www.w3.org/2000/svg">
<style type="text/css">
<![CDATA[
path {
fill: pink;
stroke: orange;
stroke-width: 6;
}
]]>
</style>
<path d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3-12.3 12.7-12.1 32.9 0.6 45.3l183.7 179.1-43.4 252.9c-1.2 6.9-0.1 14.1 3.2 20.3 8.2 15.6 27.6 21.7 43.2 13.4L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z" />
</svg>
SVG 作为 Data URIs 用于 HTML
将 SVG 作为 Data URIs 直接嵌入 Date URIS是svg 常见的格式
我们常见的是 Data URIs 和 Base64 编码，Base64 编码只是 Data URIs 中一种常见形式。 Data URIs 是一种用于在 URL 中嵌入小型数据的方案，而 Base64 编码则是其中一种常用的数据编码方式。因此，可以统一称数据统一资源标识符 可以使用在线工具转义www.svgviewer.dev/svg-to-data…
CSS内嵌svg
- 作为 CSS 数据类型的 URL 值：
url("....") - 起始字符：
data:image/svg+xml, - 编译后的数据
.svg {
background-image: url('data:image/svg+xml,\
<svg t="1709991319824" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1522" width="200" height="200">\
<path d="M607.860021 191.971879c52.992237 0 95.98594-42.993702 95.98594-95.985939S660.852259 0 607.860021 0s-95.98594 42.993702-95.985939 95.98594 42.993702 95.98594 95.985939 95.985939z m188.972319 298.156325l-46.593175-23.596544-19.397159-58.791388c-29.395694-89.186936-111.383684-151.577796-204.370062-151.777767-71.989455-0.199971-111.783625 20.197041-186.572671 50.392619-43.193673 17.397452-78.588488 50.392618-99.385441 92.386467L227.115795 425.937607c-15.597715 31.595372-2.999561 69.989748 28.39584 85.787433 31.19543 15.797686 69.189865 2.999561 84.987551-28.595811L353.897223 455.933213c6.998975-13.99795 18.597276-24.996338 32.995167-30.795489l53.592149-21.596836-30.395547 121.382219c-10.398477 41.593907 0.799883 85.787433 29.795635 117.582776l119.782454 130.780843c14.397891 15.797686 24.596397 34.794903 29.795635 55.391886l36.59464 146.578528c8.59874 34.194991 43.393644 55.191915 77.588634 46.593175 34.194991-8.59874 55.191915-43.393644 46.593175-77.588635l-44.393497-177.973929c-5.199238-20.596983-15.397744-39.794171-29.795635-55.391886l-90.986672-99.385442 34.394961-137.379876 10.998389 32.995167c10.598447 32.195284 33.395108 58.791388 63.390715 73.989162l46.593174 23.596543c31.19543 15.797686 69.189865 2.999561 84.987551-28.595811 15.397744-31.395401 2.79959-70.189718-28.595811-85.987404zM339.099391 771.486989c-6.399063 16.197627-15.997657 30.795489-28.395841 42.993702l-99.985354 100.185325c-24.996338 24.996338-24.996338 65.590392 0 90.58673s65.390421 24.996338 90.38676 0l118.7826-118.7826c12.198213-12.198213 21.796807-26.796075 28.395841-42.993702l26.996045-67.590099c-110.583801-120.582337-77.388664-83.587756-94.786115-107.38427l-41.393936 102.984914z" fill="lime" p-id="1523" />\
</svg>');
}
const swanSVG = '<svg xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="40" /></svg>'; const base64version = window.btoa(swanSVG);
window.btoa() : 这是一个全局函数，用于将字符串编码为 Base64
SVG 坐标系统
在 SVG 中，坐标系的原点位于画布的左上角，向右和向下分别是 `x` 轴和 `y` 轴的正方向
视口（Viewport）
- 从概念上来说，这个画布在两个维度上都是无限的，因此 SVG 可以拥有任意的大小。
- 在屏幕上的呈现实际上是相对于一个有限区域，被称为视口（Viewport）
<svg width="800" height="600">
<!-- SVG 内容绘制到 SVG 画布上 -->
</svg>
p3-juejin.byteimg.com/tos-cn-i-k3…
最外层svg指定width height
viewBox 属性
viewBox 创建了一个用户坐标系统，允许你通过缩放、平移或裁剪来变换 SVG 图形
<svg width="800" height="600" viewBox="0 0 400 300">
<g class="dog">
<path d="..." />
</g>
</svg>
理解：SVG画布尺寸800600 viewBox 定义画布上可显示的区域，从（0，0）开始（400，300）结束 相当于创建400300的区域，SVG 图形被裁剪到该区域，并且该区域会被放大以填充整个视口，形成放大两倍效果。
<svg width="800" height="600" viewBox="0 0 1600 1200">
<g class="dog">
<g d="..." />
</g>
</svg>
同理缩小两倍到svg 画布中
viewBox写法
viewBox = "<min-x> <min-y> <width> <height>"
<min-x>和<min-y>的值确定了 viewBox（用户坐标系统）的左上角<width>和<height>确定了该viewBox的尺寸 (不能为负值 0值不渲染)
注意：min-x 正值向左移动 负值向右移动 min-y 正值向上移动 负值向下移动
viewBox 实际上影响的是 SVG 中的用户坐标系统，有相反的效果
preserveAspectRatio 属性
用于控制svg中的viewBox 再视口中的缩放和定位
- 是均匀缩放还是拉伸、
- 整个
viewBox是否完全可见、 - 以及
viewBox在视口内的对齐方式
<!-- Viewport 和 viewBox 的宽高比相等，都是 4:3 -->
<svg width="800" height="600" viewBox="0 0 400 300">
<g class="dog">
<g d="..." />
</g>
</svg>
<!-- Viewport 和 viewBox 的宽高比不相等，前者是 4:3, 后者是 2: 1 -->
<svg width="800" height="600" viewBox="0 0 600 300">
<g class="dog">
<g d="..." />
</g>
</svg>
preserveAspectRatio 语法
preserveAspectRatio = ?
-
= none | xMinYMin | xMidYMin | xMaxYMin | xMinYMid | xMidYMid | xMaxYMid | xMinYMax | xMidYMax | xMaxYMax （必选） 相当于缩放中心点
-
= meet | slice（可选值） 该参数决定了
viewBox是否完全可见于视口内 meet类似contain slice类似cover 默认值 xMidYMid meet
<svg preserveAspectRatio="none" viewBox="0 0 137 137">
<g fill="none" fill-rule="evenodd">
<path d="M55.56 128.42a3..." />
</g>
</svg>
preserveAspectRatio = "none" 时，表示给定元素的图形不会统一缩放。
view元素
<view id="identifier" viewBox="min-x min-y width height" />
-
id属性：定义视图的唯一标识符 -
viewBox属性：指定了视图框的位置和尺寸。代表了视图框的左上角的x坐标和y坐标，以及视图框的宽度（width）和高度（height） -
作用用于指定 SVG 图形的可视区域，允许你定义 SVG 文件中的特定区域，并将其作为视口进行显示
svg片段
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 160" aria-labelledby="title">
<view id="codepen-view" viewBox="0 0 32 32"/>
<view id="twitter-view" viewBox="0 32 32 32"/>
<view id="github-view" viewBox="0 64 32 32"/>
<view id="dribbble-view" viewBox="0 96 32 32"/>
<view id="vimeo-view" viewBox="0 128 32 32"/>
<g id="codepen">
<title id="tittle">CodePen icon</title>
<circle fill="#000" cx="16" cy="16" r="16"/>
<polygon fill="none" stroke="white" stroke-width="2" stroke-linejoin="round" points="16.2,6.2 6.2,12.8 16.2,19.6 26.4,12.8"/>
<polygon fill="none" stroke="white" stroke-width="2" stroke-linejoin="round" points="16.2,12.4 6.2,18.9 16.2,25.7 26.4,18.9"/>
<line stroke="white" stroke-width="2" x1="16.2" y1="6.2" x2="16.2" y2="13.3"/>
<line stroke="white" stroke-width="2" x1="16.2" y1="19.6" x2="16.2" y2="24.8"/>
<line stroke="white" stroke-width="2" x1="6.2" y1="12.8" x2="6.2" y2="18.6"/>
<line stroke="white" stroke-width="2" x1="26.4" y1="12.8" x2="26.4" y2="18.6"/>
</g>
<g id="twitter" transform="translate(0 32)">
<title id="title">Twitter icon</title>
<circle fill="#00ACEE" cx="16" cy="16" r="16"/>
<path fill="white" d="M24.7,13.8c0,0-3.6-10-8.9-1.2c-0.5,0-8.3-3-8.3-3s5,8.9,5.3,9.2c0.4,2.1-8.2,1.3-8.2,1.3s7,5.4,13.8,3.6 c3.3,0,7.3-8,7.3-8l2.3-0.8L24.7,13.8z"/>
</g>
<g id="github" transform="translate(0 64)">
<title id="title">GitHub icon</title>
<path fill="black" d="M16,0C7.2,0,0,7.2,0,16c0,7.1,4.6,13.1,11,15.2 c0.8,0.1,1.1-0.3,1.1-0.8c0-0.4,0-1.4,0-2.7c-4.5,1-5.4-2.1-5.4-2.1c-0.7-1.8-1.8-2.3-1.8-2.3c-1.5-1,0.1-1,0.1-1 c1.6,0.1,2.5,1.7,2.5,1.7c1.4,2.4,3.7,1.7,4.7,1.3c0.1-1,0.6-1.7,1-2.1c-3.6-0.4-7.3-1.8-7.3-7.9c0-1.7,0.6-3.2,1.6-4.3 c-0.2-0.4-0.7-2,0.2-4.2c0,0,1.3-0.4,4.4,1.6c1.3-0.4,2.6-0.5,4-0.5c1.4,0,2.7,0.2,4,0.5c3.1-2.1,4.4-1.6,4.4-1.6 c0.9,2.2,0.3,3.8,0.2,4.2c1,1.1,1.6,2.5,1.6,4.3c0,6.2-3.7,7.5-7.3,7.9c0.6,0.5,1.1,1.5,1.1,3c0,2.1,0,3.9,0,4.4 c0,0.4,0.3,0.9,1.1,0.8C27.4,29.1,32,23.1,32,16C32,7.2,24.9,0,16,0z"/>
</g>
<g id="dribbble" transform="translate(0 96)">
<title id="tittle">dribbble icon</title>
<circle fill="white" cx="16" cy="16" r="16"/>
<circle fill="#EA4C89" stroke="#C32361" stroke-width="2" cx="16.2" cy="16.1" r="10.6"/>
<path fill="none" stroke="#C32361" stroke-width="2" d="M21.3,25.4c-1.2-9.5-9.8-18.7-9.8-18.7"/>
<path fill="none" stroke="#C32361" stroke-width="2" d="M5.8,14.5C17.9,17,22.7,7.8,22.7,7.8"/>
<path fill="none" stroke="#C32361" stroke-width="2" d="M8.3,23.2c6.1-9.8,18.5-6.6,18.5-6.6"/>
</g>
<g id="vimeo" transform="translate(0 128)">
<title id="title">Vimeo icon</title>
<circle fill="#1AB6E9" cx="16" cy="16" r="16"/>
<path fill="white" d="M26.2,11.6c-0.1,2-1.5,4.8-4.3,8.4c-2.9,3.7-5.3,5.6-7.3,5.6c-1.2,0-2.3-1.1-3.1-3.4 c-0.6-2.1-1.1-4.1-1.7-6.2c-0.6-2.3-1.3-3.4-2-3.4c-0.2,0-0.7,0.3-1.6,1l-1-1.3c1-0.9,2.1-1.8,3.1-2.7c1.4-1.2,2.4-1.8,3.1-1.9 c1.6-0.2,2.6,1,3,3.3c0.4,2.6,0.7,4.2,0.8,4.8c0.5,2.1,1,3.2,1.6,3.2c0.4,0,1.1-0.7,2-2.1c0.9-1.4,1.4-2.4,1.4-3.2 c0.1-1.2-0.3-1.8-1.4-1.8c-0.5,0-1,0.1-1.6,0.3c1-3.4,3-5,5.9-4.9C25.3,7.5,26.4,8.9,26.2,11.6z"/>
</g>
</svg>
<img
src={`${custom}#codepen-view`}
alt="codepen"
className="h-8 w-8"
/>
<img
src={`${custom}#twitter-view`}
alt="twitter"
className="h-8 w-8"
/>
<img
src={`${custom}#github-view`}
alt="github"
className="h-8 w-8"
/>
```
利用view 元素，你可以将 SVG 图形分割成多个部分，选择性地显示这些部分，# 后面为view的id 也可以用` <use href={`${path.svg}#id`}></use>`
