svg与css关联

<style>

#svg-rect {

fill: green;

stroke: yellow;

stroke-width: 3px;

display: visible;//隐藏和显示 隐藏用none

}

</style>

<svg width="100" height="100">

<rect id="svg-rect" x="10" y="10" width="80" height="80" />

</svg>

使用类控制

<style>

.svg-circle {

fill: red;

stroke: blue;

stroke-width: 2px;

}

</style>

<svg width="100" height="100">

<circle class="svg-circle" cx="50" cy="50" r="40" />

</svg>

相关推荐
玲小珑1 分钟前
Next.js 教程系列(十三)Server Actions:新一代全栈能力
前端·next.js
toooooop83 分钟前
elementUI vue2 前端表格table数据导出(二)
前端
山河木马21 分钟前
前端学习C++之:创建对象
前端·javascript·c++
汪子熙24 分钟前
web 应用本地开发中的 LiveReload 协议深度解析
前端·javascript
UI设计和前端开发从业者26 分钟前
大数据时代UI前端的智能化转型之路:以数据为驱动的产品创新
大数据·前端·ui
全宝39 分钟前
前端也能这么丝滑!Node + Vue3 实现 SSE 流式文本输出全流程
前端·javascript·node.js
前端小巷子1 小时前
Web缓存:原理、策略与优化
前端·面试
小磊哥er1 小时前
【前端工程化】前端工作中如何协同管理开发任务?
前端
程序员小白条1 小时前
我的第二份实习,学校附近,但是干前端!
java·开发语言·前端·数据结构·算法·职场和发展
编程大全1 小时前
2025年前端面试题
前端