Loading [MathJax]/jax/output/CommonHTML/config.js

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

社区首页 >问答首页 >SVG路径使用CSS填充颜色

问SVG路径使用CSS填充颜色
EN

Stack Overflow用户

提问于 2013-07-24 08:50:27

回答 1查看 6.8K关注 0票数 2

我看过很多人发这个帖子，他们似乎都对自己的答案很满意。

然而，我不能让我的路径填充到实际工作中，

http://jsfiddle.net/OwenMelbz/LvgmV/

小提琴在上面，svg是从Illustrator生成的

HTML

<img src="http://owenmelbourne.com/arrow.svg">

CSS

img {width: 100px}
path {
    fill: blue;
}

但是我总是得到

SVG代码如下所示

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="9.334px" height="11.881px" viewBox="0 0 9.334 11.881" enable-background="new 0 0 9.334 11.881" xml:space="preserve">
<path fill="#999999" d="M4.159,5.942L0.202,1.884c0,0-0.609-1.032,0.288-1.641s1.471,0.118,1.471,0.118L6.29,4.877
    c0,0,1.15,0.947,0.254,1.894c-0.896,0.947-3.94,4.143-3.94,4.143L2.08,11.438c0,0-0.861,0.996-1.759,0
    c-0.93-1.031,0.863-2.418,0.863-2.418L4.159,5.942z"/>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>

如果有人能对这件事有所了解，我将不胜感激。

谢谢

EN

回答 1

Stack Overflow用户

发布于 2018-08-18 05:05:52

CSS填充和其他特定于SVG的规则不适用于使用<img>标记呈现的SVG：

// CSS fills won't apply to this
<img src="image.svg">

您需要以内联方式呈现SVG，以使CSS填充正常工作。

// CSS fills will apply to this
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" 
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 width="9.334px" height="11.881px" viewBox="0 0 9.334 11.881" enable- 
background="new 0 0 9.334 11.881" xml:space="preserve">
<path fill="" d="M4.159,5.942L0.202,1.884c0,0-0.609-1.032,0.288-1.641s1.471,0.118,1.471,0.118L6.29,4.877
c0,0,1.15,0.947,0.254,1.894c-0.896,0.947-3.94,4.143-3.94,4.143L2.08,11.438c0,0-0.861,0.996-1.759,0
c-0.93-1.031,0.863-2.418,0.863-2.418L4.159,5.942z"/>
</svg>

CSS：

#Layer_1 {
    fill: blue;
}

此外，您还可以使用Javascript自动将SVG转换为内联元素。然而，如果你正在处理一个界面的一些静态SVG(例如你的主题)，最好是直接复制-粘贴它们内联。

票数 0

EN

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

原文链接：

https://stackoverflow.com/questions/17829261

复制

相关文章

od 转储二进制文件常用命令

查看 .shstrtab , 使用 --skip-bytes 和 --read-bytes 定位：

西湖醋鱼

2020/12/30

6620

堆转储文件泄露

java spring jvm spring boot jdk

一开始通过浏览器访问目标站点，发现网站Icon是一个小绿叶，初步猜测网站使用了Spring Boot框架。然后进行执行器端点路径的枚举，得到以下相关路径：

Naraku

2021/07/29

1.1K0

js 数组转json，json转数组[js 数组与json 互相转换]

java https 网络安全

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/151825.html原文链接：https://javaforall.cn

全栈程序员站长

2022/06/24

12.3K0

js json字符串转json数组_string转json数组

json html http https 网络安全

查了很久，也实践了很多，都没有成功。网上说得最多的就是用 net.sf.json.JSONArray和net.sf.json.JSONObject 两个jar 包里面的

全栈程序员站长

2022/11/08

13.6K0

日志文件转储压缩实现

日志的转储和压缩是非常关键的，它不仅可以减少硬盘空间占用，主要还可以在发生故障时根据日志定位出故障原因。下面来看看golang和java的文件转储实现。

我的小碗汤

2018/08/22

8890

java json数组转json对象_json对象数组

java https 网络安全

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至举报，一经查实，本站将立刻删除。

全栈程序员站长

2022/09/30

10.3K0

java json数组转json对象_json对象数组

objectmapper json转对象_json数组转map

https 网络安全

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至举报，一经查实，本站将立刻删除。

全栈程序员站长

2022/11/09

5.5K0

PHP csv文件内容转成数组/Json

$lines = array_map('str_getcsv', file($filePath));; $result = array(); $headers = null; if (count($lines) > 0) { $headers = $lines[0]; } for($i=1; $i<count($lines); $i++) { $obj = $lines[$i]; $result[] = array_combine($headers, $obj);//转成数组

悟空聊架构

2018/05/18

1.9K0

PHP csv文件内容转成数组/Json

$lines = array_map('str_getcsv', file($filePath));; $result = array(); $headers = null; if (count($lines) > 0) { $headers = $lines[0]; } for($i=1; $i<count($lines); $i++) { $obj = $lines[$i]; $result[] = array_combine($headers, $obj);//转成数组

悟空聊架构

2018/06/26

1.6K0

php 数组转json对象和json 数组

编程算法 https java 网络安全 json

php中数组转json的规则是：当没有指定索引(0~n)时会转换为json数组，而指定了索引会转换为json对象。

全栈程序员站长

2022/06/24

6.6K0

js 数组转json和json转数组

java https 网络安全编程算法 json

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/151869.html原文链接：https://javaforall.cn

全栈程序员站长

2022/06/24

8.2K0

json字符串数组转json数组

json java https 网络安全 javascript

当需要把一串字符串转成一个json 数组，并遍历其中的内容时。首先要导入 net.sf.json.JSONArray和net.sf.json.JSONObject 两个jar 包

全栈程序员站长

2022/06/24

5.7K0

vue遍历数组中的数组_vue数组转json

https 网络安全

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至举报，一经查实，本站将立刻删除。

全栈程序员站长

2022/11/03

4K0

java中数组转成list_java数组转json

actionscript 编程算法 java https 网络安全

1. 使用Arrays.asList生成的list是定长的，无法增加或删除元素，调用add或remove方法会抛出UnsupportedOperationException异常

全栈程序员站长

2022/09/25

1.4K0

Java转golang_json数组转json对象

https java 网络安全

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至举报，一经查实，本站将立刻删除。

全栈程序员站长

2022/10/02

4K0

如何获取JVM堆转储文件

java jdk jvm 打包

堆转储是诊断与内存相关的问题（例如内存泄漏缓慢，垃圾回收问题和 java.lang.OutOfMemoryError。它们也是优化内存消耗的重要工具。

FunTester

2019/12/04

1.2K0

将文件内容复制到另外文件

在示例类Demo.FileDemo中，ProcessFile()方法接受输入文件和输出文件，并调用SetUpInputFile()和SetUpOutputFile()打开文件，一个用于读取，另一个用于写入。然后，它逐行读取输入文件，并调用ProcessLine()对每行的内容执行一个或多个替换，将每行的新内容写入输出文件。

用户7741497

2022/07/06

1.1K0

javascript定义数组,将数组中数组内容求和_数组求和JAVA

https 网络安全

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至举报，一经查实，本站将立刻删除。

全栈程序员站长

2022/11/11

3.1K0

Js 数组转JSON格式

编程算法 https java 网络安全 json

要点2：在js里写数组的时候是var data = new Array() 但是你如果是要转json显示的时候就要写成 var data = {}，不然转出来的json全是空的。

全栈程序员站长

2022/06/24

12.2K0

Java数组转Json数组「建议收藏」

java https 网络安全

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/151823.html原文链接：https://javaforall.cn

全栈程序员站长

2022/06/24

2.3K0

相似问题

将sqlalchemy json数组结果转储到json文件中

18

将AppleScript字典内容转储到JSON

10

将多维数组的内容转储到新的JSON变量中。

14

将中文数据转储到json文件中

10

将Python字典转储到JSON文件

11

添加站长进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例