腾讯云

文章/答案/技术大牛

发布

社区首页 >问答首页 >忽略其他<svg>元素中<svg>元素的“背景”样式属性

问忽略其他<svg>元素中<svg>元素的“背景”样式属性
EN

Stack Overflow用户

提问于 2018-06-04 00:25:38

回答 2查看 630关注 0票数 5

一个元素显示：

外部<svg>元素应用了background样式属性
内部<svg>元素没有应用background样式属性

另一个实验向两个<svg>添加了一个transform属性，这表明该属性也被内部<svg>忽略。

为什么内部<svg>元素忽略background样式和transform之类的属性？通常，是否有文档说明哪些属性被应用于嵌套的<svg>元素，哪些属性没有应用？

css

svg

styling

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-06-04 05:59:51

问题是，当<svg>嵌入到HTML中时，它作为一个SVG元素和一个HTML元素都具有双重功能。

为了保持一致性，一些HTML特性与最外层的<svg>元素一起工作，但它们不适用于内部/嵌套的SVG元素。记住，SVG是与HTML不同的标准。它有着不同的用途，而且并不是所有HTML特性都可以使用SVG元素。尽管如此，在有意义的地方，某些HTML特性是支持的，或者很快就会得到支持。

一个早期的添加是使background/background-color与最外层的<svg>元素一起工作。AFAIK所有浏览器现在都支持这一点。

这同样适用于transform。当前的SVG规范(1.1)不允许在transform元素上使用<svg>，但是为了与其他<svg>元素保持一致，浏览器支持最外层的<svg>元素。在即将推出的SVG 2标准中，内部transform元素也将被允许使用<svg>。事实上，Firefox已经实现了这一点。我相信这是目前唯一的浏览器。

如果您想要一种在任何地方都有效的方法，那么下面的方法通常是可行的。

<svg ...>
  <rect width="100%" height="100%" fill="#00f"/>
  ...
</svg>

票数 5

Stack Overflow用户

发布于 2018-06-04 01:06:09

我发现另一个问题也有同样的问题，另一份副本包含到官方W3C文档的链接，显示了嵌套的<svg>组件上允许哪些属性。

总之，嵌套<svg>不能完成顶级<svg>所能做的一切，如果您遇到了问题，请检查W3C文档，看看您试图做的事情是否完全不受支持。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/50676245

复制

SVG与foreignObject元素

渲染 svg text 后端浏览器

可缩放矢量图形Scalable Vector Graphics - SVG基于XML标记语言，用于描述二维的矢量图形。作为一个基于文本的开放网络标准，SVG能够优雅而简洁地渲染不同大小的图形，并和CSS、DOM、JavaScript等其他网络标准无缝衔接。SVG图像及其相关行为被定义于XML文本文件之中，这意味着可以对其进行搜索、索引、编写脚本以及压缩，此外这也意味着可以使用任何文本编辑器和绘图软件来创建和编辑SVG。

WindRunnerMax

2023/08/13

5630

SVG - 基本的SVG属性

svg html5 html

SVG - 基本的SVG属性 HTML5学堂：在前一篇文章当中，我们讲解了SVG的基本知识，并且为大家介绍了如何在html文件当中书写SVG代码。今天我们具体讲解SVG的基本属性，如何使用SVG完成线、圆等图形的绘制。 line - 直线拥有四中基本属性 x1 属性在 x 轴定义线条的开始 y1 属性在 y 轴定义线条的开始 x2 属性在 x 轴定义线条的结束 y2 属性在 y 轴定义线条的结束 demo <line x1 = "20" y1 = "20" x2 = "200" y2 = "180" st

HTML5学堂

2018/03/12

4.1K0

其他html元素和属性

html checkbox class h2 程序

disabled：标识元素不可用，就是用户不可互动，比如 button 的 disabled，就是按钮不能点击

鹤川

2023/03/21

7400

获取元素的样式属性原

编程算法

document.getElementById("test").style.color 这种方式获取的只是内联样式，并不能获取内部样式和外部样式，下面为内部样式

tianyawhl

2019/04/04

2.4K0

一篇文章带你了解SVG <tspan>元素

svg

SVG <tspan>元素用于在SVG中绘制多行文本。不必绝对定位每行文本，该 <tspan>元素使相对于前一行文本放置一行文本成为可能。该 <tspan>元素还使用户可以一次选择并复制粘贴几行文本，而不仅仅是一个text元素。

前端进阶者

2021/01/22

2.2K0

一篇文章带你了解SVG <use> 元素

svg css node.js

SVG <use>元素可以重用SVG文档中其他位置（包括 <g>元素和 <symbol>元素）的SVG形状。可以在 <defs>元素内部（使形状直到使用之前不可见）或外部定义重用形状。

前端进阶者

2021/01/22

3.9K0

一篇文章带你了解SVG <Animation> 动画元素

svg css

SVG <Animation> 动画元素用于为SVG图形制作动画。动画元素最初是在同步多媒体集成语言（SMIL）中定义的。在动画中，必须指定属性，运动，颜色，动画的开始时间和动画的持续时间的开始和结束值。

前端进阶者

2021/01/22

3K0

CSS3中元素背景的 gradient 渐变属性

css

前段时间我写过一篇：CSS中background属性总结整理了background的常用属性。

德顺

2019/11/13

1.4K0

SVG - 创建SVG图片

svg html5

SVG - 创建SVG图片 HTML5学堂：之前在绘图中使用到了SVG以及Canvas，因此决定最近将绘图类的知识和大家分享一下。从研究角度来说，SVG比Canvas要难很多。没有合适的中文文档，自己只能去翻译英文文档（唉，英语不好啊）。今天先来说说SVG的基本知识以及创建SVG的基本方法。 SVG是什么 W3C推荐的网页图形格式，类似于Flash，SVG是一种描述二维矢量图形的标记语言，但它是一种开发的以XML为基础的语言，不是一种私有语言。 SVG的支持程度 IE8-以及Android 2.3默认浏览器

HTML5学堂

2018/03/12

4.2K0

SVG绘图-SVG.js

node.js svg api

官方文档：https://svgjs.dev/docs/3.0/getting-started/

码客说

2021/12/05

6.3K0

Python+Selenium 技巧篇-svg标签内元素的xpath定位方式

svg

这种元素比较特殊，需要通过 name 属性来进行定位。写法如下： //*[name()="svg"]//*[name()="image"]

小蓝枣

2020/09/23

2K0

SVG 的 path 属性绘制图形

svg

SVG 是一种基于 XML 语法的图像格式，全称是可缩放矢量图（Scalable Vector Graphics）。

逃跑计划

2022/08/04

1.5K0

SVG

xml css svg

HTML体系中，最常用的绘制矢量图的技术是SVG和HTML5新增加的canvas元素。这两种技术都支持绘制矢量图和光栅图。不过canvas更偏重于动画的制作。所以，绘制矢量图的大任落到了SVG身上。

踏浪

2019/07/31

5.7K0

SVG之旅：SVG的图层和渲染顺序

svg 渲染 xml css

不管是在制图软件中还是Web页面的DOM元素，都有层的概念。在制图软件中，大家比较熟悉，能非常的清晰的看出图层的概念。而在Web页面中，特别是我们熟悉的HTML的DOM中，其实他也有层的概念。不同的是制图软件可以用鼠标拖动图层来改变层次，而DOM中需要依赖于CSS的属性来控制他的层次关系。其实在SVG中，他也有层和渲染顺序的概念。今天我们就来看看SVG中的图层和渲染顺序相关的知识。 SVG的图层首先我们来看SVG图层这个东东，相信只要使用过制图软件，比如Photoshop或者Sketch等，对于图层的认识

企鹅号小编

2018/02/28

7.1K0

修改表单元素中placeholder属性样式、清除IE浏览器中input元素的清除图标和眼睛图标

css

在做项目的时候，一般表单元素的placeholder属性样式都是使用浏览器默认的，但有时候为了追求设计上的美感需要修表单元素的placeholder样式（也有可能是遇到了一个处女座的设计师或者是客户），就不等不修改一下placeholder的样式。可以通过下面的代码修改样式：

用户6167509

2019/09/04

2K0

修改表单元素中placeholder属性样式、清除IE浏览器中input元素的清除图标和眼睛图标

9.25【前端开发】超链接伪类：如何在svg元素上使用超链接伪类?

css svg

a:link 未单击访问时超链接样式 a:link{color:#9ef5f9;}

LIYI

2020/10/09

2.4K0

网页中如何使用SVG

编程算法 svg css html

① 如果文件中的根元素带有明确的 height 和 width 属性，则它们会被用作文件的固有尺寸； ② 如果只指定 height 或者 width ，并且带有 viewBox 属性，那么将用 viewBox 计算宽高比，图像会被缩放已匹配指定的尺寸； ③ 如果带有 viewBox 属性而没有尺寸，则 viewBox 的 height 和 width 将被视为像素长度。 ④ 没有如何尺寸，浏览器应该为嵌入内容应用默认 HTML 尺寸，通常是 150 像素高，300 像素宽。

奋飛

2021/08/31

1.9K0

CSS样式块级元素，行内元素，行内块级元素

c++

HTML元素按布局属性可以分为三种类型：块级元素、行内元素、行内块元素这篇文章梳理一下他们的区别与联系

用户7043603

2022/02/26

2.1K0

网页中如何使用SVG

svg

① 如果文件中的根元素 <svg> 带有明确的 height 和 width 属性，则它们会被用作文件的固有尺寸； ② 如果只指定 height 或者 width ，并且 <svg> 带有 viewBox 属性，那么将用 viewBox 计算宽高比，图像会被缩放已匹配指定的尺寸； ③ 如果<svg> 带有 viewBox 属性而没有尺寸，则 viewBox 的 height 和 width 将被视为像素长度。 ④ 没有如何尺寸，浏览器应该为嵌入内容应用默认 HTML 尺寸，通常是 150 像素高，300 像素宽。

奋飛

2021/02/16

1.2K0

如何获取元素样式

css

元素的style属性时常被用于获取元素样式，但很多时候它是不奏效的。看下面的代码：

跑马溜溜的球

2020/12/07

2K0

相似问题

SVG样式的子SVG元素不显示背景颜色

使用内联svg作为其他元素的背景

SVG元素悬停以导致其他SVG元素更改

SVG元素的CSS背景

单击其他SVG元素时显示/隐藏SVG元素的javascript

添加站长进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

社区富文本编辑器全新改版！诚邀体验～

全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验

问忽略其他<svg>元素中<svg>元素的“背景”样式属性
EN

回答 2

Stack Overflow用户

Stack Overflow用户

SVG样式的子SVG元素不显示背景颜色

使用内联svg作为其他元素的背景

SVG元素悬停以导致其他SVG元素更改

SVG元素的CSS背景

单击其他SVG元素时显示/隐藏SVG元素的javascript

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问忽略其他<svg>元素中<svg>元素的“背景”样式属性EN

回答 2

Stack Overflow用户

Stack Overflow用户

SVG样式的子SVG元素不显示背景颜色

使用内联svg作为其他元素的背景

SVG元素悬停以导致其他SVG元素更改

SVG元素的CSS背景

单击其他SVG元素时显示/隐藏SVG元素的javascript

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问忽略其他<svg>元素中<svg>元素的“背景”样式属性
EN