BR 技术头条
zh www.zhangxinxu.com / 2018-12-24 23:48 / by @技术头条 / 原作者:@张鑫旭

CSS vector-effect与SVG stroke描边缩放

默认情况下,我们改变SVG图形尺寸,stroke描边宽度也会跟着一起变化。有时候,我们希望描边宽度一直不变,怎么办呢?可以试试使用vector-effect属性。

赞过的人

@技术头条

发表评论

相关分享

zh www.zhangxinxu.com / 2024-11-02 16:22

时隔两年,Chrome也支持round等CSS数学函数了

本文介绍了CSS中的数学函数 `round()` 的新应用,它能实现多种取整方式,如上舍、下舍、四舍五入等,用于提升样式的精确控制。特别是在字体大小、动画步阶和响应式设计中,`round()` 可防止小数值带来的渲染偏差,使界面更一致。这一函数现已在Chrome中支持,为开发者提供了更灵活的布局工具。

无图
zh www.zhangxinxu.com / 2024-11-02 16:18

搞懂SVG中各种Light相关的光源滤镜

本文深入解析了SVG中与光源相关的滤镜,包括`feDistantLight`、`fePointLight`和`feSpotLight`的用法,演示了如何通过这些光源滤镜实现点光源、平行光和聚光效果。利用这些滤镜,开发者可以为SVG元素增添逼真的光照和阴影效果,适用于卡片、按钮等交互元素的设计。文章还通过代码示例和效果演示,帮助读者更直观地理解光影滤镜的应用场景。

无图
zh www.zhangxinxu.com / 2024-09-09 23:40

如何使用纯CSS鉴别是不是Safari浏览器

如何通过纯 CSS 来判断是否为 Safari 浏览器?本文介绍了多种实用技巧和 @supports 规则的使用,帮助开发者轻松检测并处理 Safari 特有的样式兼容性问题。无论是桌面还是 iOS Safari,本文都有详细的解决方案!

无图
in insights.thoughtworks.cn / 2022-09-08 17:45

整洁架构之CSS

虽然开发工具早已经从 preprocessor 进化到了 styled component,但在我看来新的工具并没有让我们的样式代码写的更好,只是更快——也可能会让代码坏的更快。工具的繁荣并没有让那些导致代码难以维护的根本问题烟消云散,而是更易让我们对其视而不见。这篇文章旨在回答一个问题:为什么样式代码难以写对,它的陷阱究竟在哪里?

无图
zh www.zhangxinxu.com / 2022-08-18 23:37

CSS background背景图标的变色技巧


最近遇到了需要使用CSS让background背景图标的变色的需求场景,使用背景混合模式实现的,可能大家以后也用得到,所以分享下。

无图
zh www.zhangxinxu.com / 2022-08-18 23:18

CSS排版为何强?瞧瞧多牛这换行

在 CSS 这门语言中,凡是 Web 中的换行规则都可以改变,无论是中文的还是英文的,灵活到超出你的想象,非常强大!

在文字内容排版这块,CSS 是计算机领域中无可争议的霸主气,什么 SVG 什么 canvas 根本就是望尘莫及。

无图