SVG与CSS的特殊性

这几天在看CSS权威指南，之前看到了CSS的特殊性这一节。正好今天遇到了个相关问题：在SVG中使用样式。

<text x="250" y="150"

font-family="Verdana" font-size="10px" fill="blue" >

Hello, out there

</text>

今天在调整SVG中text的文字大小（font-size）时，发现我不论如何设置text的font-size都无法改变其大小。后来发现问题在于一个CSS的样式：

* {

font-size:12px;

}

这个样式还会影响SVG标签内的元素，确实意向不到。不过仔细想想，像firefox、chrome这样原生支持SVG的浏览器SVG已经是html的一部分了。*的特殊性虽然只有0，但是0特殊性也比没有特殊性的font-size属性值要优先考虑。故字体怎么修改都是12px。

那么如果我要用JS来修改大小，怎么办呢？

很简单，使用style即可。行内样式的特殊性是最高的，故可以覆盖掉其他。

<text x="250" y="150"

font-family="Verdana" fill="blue" style="font-style:10px;">

Hello, out there

</text>

转载于:https://www.cnblogs.com/zhaobl/archive/2011/04/28/2031369.html

SVG与CSS的特殊性相关推荐

svg画css,CSS vs. SVG:图形文本的效果
这篇文章是探索有关于CSS和SVG技术的系列文章第一篇,通过例子来阐述CSS和SVG相关技术的比较.因为大家对SVG有一定的偏见,这个系列文章只是为了证明SVG解决Web上的某些设计问题.因为它是自然 ...
img src SVG使用CSS更改样式
本文翻译自:img src SVG changing the styles with CSS html html <img src="logo.svg" alt=" ...
html svg波浪,CSS实现svg图片水纹波浪流动效果
CSS实现svg图片水纹波浪流动效果里面的其他颜色是自己加的,把下面代码自己改改就可以html> 标题 body { margin:0; background:red; } h1 { fo ...
svg symbol css,Vue项目使用symbol的方式引入svg图标
还在使用图片或雪碧图或iconClass字体图标嘛,都已经过时啦,时代变迁我们应顺势而为.=========同样这篇文章也是来自于群里的群主前端大佬,博主跟着学习,同时分享给大家.有问题就进群来找群主 ...
抖音抖一抖-SVG和CSS视觉故障艺术小赏
故障艺术,英文名称叫glitch,在很多赛博朋克作品中经常看到,其实就是故意表现一种显示设备的小故障效果,抖音的图标其实就是这种的效果,我们看下这个图标这个图标中的红色和蓝色的偏移其实就是一种故障艺 ...
css svg视频自适应_使用SVG和CSS步骤进行自适应的动画步行周期
css svg视频自适应 In the previous article I talked about steps() in CSS animation, and provided a simple ...
svg转css font,svg转font字体方案
在我们做项目的时候,通常会有一些icon图标,如下图: 这些图标,如果不跟设计师说,设计师会给png图.但是视觉规范里面,一般都会对这些图标加一些hover,active态,还会改变大小.如下图: 所 ...
isf：一个极简的使用SVG的CSS图标框架
文中[]的内容为类选择器搞前端的朋友都知道小图标对于前端的作用,那是极为重要的,但是由于技术涉及面较多,图标框架想要根据自己意愿添加图标有一定的难度,只能在哀叹中盼着图标库更新. 我就把我近两年使用 ...
css元素特殊性及元素分类，详细解释。
一.元素特殊性二.元素重要性三.元素分类今天来分别讲讲元素的特殊性,重要性以及元素的分类 1.元素的特殊性特殊性描述了不同规则的相对权重,当多个规则应用到同一个元素时,权重越大的样式会优先显示 ...

SVG与CSS的特殊性

SVG与CSS的特殊性相关推荐

最新文章

热门文章