当前位置: 首页 > 知识库问答 >
问题:

CSS中的内联SVG

长孙燕七
2023-03-14

是否可以在CSS中使用内联SVG定义

我的意思是:

.my-class {
  background-image: <svg>...</svg>;
}

共有1个答案

督飞鸣
2023-03-14

是的,有可能。试试看:

body { background-image: 
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><linearGradient id='gradient'><stop offset='10%' stop-color='%23F00'/><stop offset='90%' stop-color='%23fcc'/> </linearGradient><rect fill='url(%23gradient)' x='0' y='0' width='100%' height='100%'/></svg>");
      }
  • http://jsfiddle.net/6watq/

(请注意,SVG内容需要通过URL转义才能工作,例如#被替换为%23。)

 类似资料:
  • 问题内容: 更新 感谢porneL指出了生成的内容和替换的元素之间的关系。 有趣的是,名为“CSS3生成和替换的内容模块”的W3C文档(从11年前开始!)定义了伪元素,该伪元素可以通过将生成的内容放置在替换的元素之外来提供使用生成的内容的解决方案。,而不是尝试将其附加到内部。 原始问题 有没有一种使用CSS和伪元素来样式化内联SVG元素的方法? 在此示例中,使用定义的样式不适用于SVG(在Fire

  • 问题内容: 我在这里有一个有效的代码:(您可能需要将结果窗口放大以查看居中对齐效果) 题 该代码工作正常,但我不喜欢这样。这是使环绕类对齐中心的唯一方法。我认为,如果有一种使用方法或更好。是否可以用其他方法解决对齐中心? 对我来说,向容器添加一个固定的不是一个选择。 如果将来JS Fiddle链接损坏,我还将在这里粘贴代码: 问题答案: 可接受的解决方案对我而言不起作用,因为我需要一个子元素在10

  • 了解在 Dreamweaver 中如何通过将内联样式转换为 CSS 规则以使 CSS 更清晰、更有条理。 内联样式不是推荐的最佳做法。若要使 CSS 更干净整齐,可以将内联样式转换为驻留在文档头或外部样式表中的 CSS 规则。 在“代码”视图(“视图”>“代码”)中,选择包含要转换的内联 CSS 的整个样式属性。 右击并选择“选择”>“将内联 CSS 转换为规则”。 在“转换内联 CSS”对话框中

  • 问题内容: 我正在寻找一个Java库,该库可以根据其ID / class属性将外部文件与文档内联。 我找到了 jStyleParser, 但不确定这是否适合我。我似乎无法理解它是否可以内联HTML中的元素。文档和示例不是我所期望的。 有没有人可以回答这个问题,或者有另一个图书馆可以解决这个问题? 谢谢 问题答案: 您可以尝试CSSBox。只需查看软件包中包含的 ComputeStyles 演示(有

  • 问题内容: 我知道将CSS样式直接嵌入到它们会影响的HTML标记中会破坏CSS的许多目的,但有时对于调试目的很有用,例如: 嵌入规则的语法是什么: 放入A标签的样式属性中?显然不是这个… …因为这将一直适用,而不是仅在悬停期间适用。 问题答案: 恐怕无法完成,伪类选择器无法内联设置,您必须在页面或样式表上进行设置。 我应该提到,从 技术上讲, 您 应该 能够按照CSS规范进行操作,但是大多数浏览器

  • 问题内容: 我无法弄清楚为什么内联元素在某些浏览器中会忽略(Chrome和Firefox会忽略它,但IE9不会)。 这是一个例子: 预期结果是元素高度为26px,但是将其设置为31px。如果我将元素的显示设置为“阻止”,则高度正确设置为26px。 我读的所有内容都应该设置为行高,因此我无法弄清楚。这是我在W3C上阅读的内容: 计算行框中每个行内框的高度。对于替换的元素,内联块元素和内联表元素,这是