用CSS选择一个SVG＃文档

我想从我的样式表添加一个填充到.svg文件。我已经内嵌它作为一个对象：用CSS选择一个SVG＃文档

<object class="img-responsive" data="<?php echo get_template_directory_uri(); ?>/assets/white-icons/icon2-white.svg" type="image/svg+xml"> 
</object>

我可以使用检查填写，但是当我尝试使用我的样式表来选择SVG ID似乎无法找到ID。我的猜测是我需要访问SVG DOM而不是我的主要DOM。它看起来像我的SVG是在一种名为#document的嵌入式DOM中。我是否需要改变保存SVG的方式来解决这个问题？

这里是我的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" class="twitter" id="Layer_5" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
width="20px" height="20px" viewBox="0 0 20 20" enable-background="new 0 0 20 20" xml:space="preserve"> 
<path d="M18.071,4.914c-0.626,0.276-1.298,0.463-2.004,0.548c0.722-0.432,1.275-1.115,1.534-1.929 
c-0.674,0.399-1.42,0.689-2.216,0.845c-0.635-0.678-1.542-1.101-2.545-1.101c-1.926,0-3.487,1.562-3.487,3.487 
c0,0.274,0.029,0.54,0.09,0.794C6.546,7.414,3.976,6.027,2.254,3.915c-0.3,0.517-0.472,1.116-0.472,1.755 
c0,1.208,0.616,2.276,1.551,2.903C2.763,8.555,2.225,8.396,1.753,8.137V8.18c0,1.69,1.203,3.101,2.798,3.42 
c-0.292,0.082-0.6,0.123-0.918,0.123c-0.225,0-0.443-0.021-0.656-0.062c0.443,1.386,1.731,2.394,3.258,2.42 
c-1.194,0.937-2.698,1.494-4.332,1.494c-0.281,0-0.559-0.016-0.832-0.048c1.543,0.988,3.377,1.566,5.346,1.566 
c6.417,0,9.924-5.314,9.924-9.923c0-0.152-0.003-0.303-0.01- 0.452C17.013,6.228,17.605,5.612,18.071,4.914"/> 
</svg>

来源

2016-03-15 Blake

可能重复[如何选择CSS中的#document中的元素？]（http://stackoverflow.com/questions/17994634/how-do-i-select-elements-within-a-document-in -css） – BoltClock

您不能访问该对象与CSS内容以及你不能用CSS访问iframe的内容。

这是使用object的优势。它封装了来自外部世界的内容。

如果你想影响与CSS的SVG你必须把它嵌入到当前文档，而无需使用object：

<div><svg><path id='mypath' ... /></svg></div>

，然后#mypath是由你的CSS的影响。

来源

2016-03-15 16:25:43 smnbbrv

如果您希望通过javascript，可以将CSS注入iframe的内容。 –

用CSS选择一个SVG＃文档

回答

相关问题