QQs'Note
0%

svg

Posted on Edited on

svg 可缩放矢量图形(Scalable Vector Graphics), 使用xml格式定义图形，大概长这样子

1
2
3
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg>

嵌入html中可以作为dom操作，在数据可视化入门中曾提到D3数据可视化库即使用svg进行动态渲染的

对于简单的icon响应可以有

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<style>
    .toggle-btn {
        display: inline-block;
        width: 40px;
        height: 40px;
        cursor: pointer;
        color: #000;
        background: #ccc;
    }

    .toggle-btn>input {
        width: 0;
        height: 0;
        opacity: 0;
    }

    .toggle-btn>svg {
        width: 100%;
        height: 100%;
    }

    input:checked+svg circle {
        fill: blue
    }
</style>
<label class="toggle-btn">
    <input type="checkbox">
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <circle cx="20" cy="20" r="20" stroke="black" stroke-width="2" fill="none" />
    </svg>
</label>

svg-react-loader

将.svg文件资源作为组件载入

1
2
3
import MyIcon from '-!svg-react-loader!../../assets/image/icon.svg'
...
return (<> <MyIcon> <>)

作为资源路径
1
2
3
import MyIcon from '../../assets/image/icon.svg'
...
return (<img src={MyIcon} />)

作为inline element(原生React特性)
1
2
3
4
5
import {ReactComponent as MyIcon} from '../../assets/image/icon.svg'
...
return (<div style={{color:'red', cursor: 'pointer'}}>
    <MyIcon />
</div>)

ng-inline-svg

shared.module.ts

1
2
3
4
5
6
7
8
9
10
import { InlineSVGModule } from 'ng-inline-svg'

@NgModule({
    imports: [...LibModules,
        InlineSVGModule.forRoot()],
    exports: [...MuiModules],
    declarations:  [],
    providers: [],
})
export class SharedModule { }

mycomponent.html
1
<div [inlineSVG]="'assets/image/icon.svg'"></div>

鼠标响应

Web MDN: svg pointer-events