相关疑难解决方法(0)

RGB到十六进制,十六进制到RGB

如何将RGB格式的颜色转换为Hex格式,反之亦然?

例如,转换'#0080C0'(0, 128, 192).

javascript rgb hex colors

498
推荐指数
18
解决办法
42万
查看次数

如何使用外部CSS设置SVG样式?

我有几个SVG图形我想通过我的外部样式表修改颜色 - 而不是直接在每个SVG文件中.我不是将图形放在线上,而是将它们存储在我的图像文件夹中并指向它们.

我已经以这种方式实现它们以允许工具提示工作,并且我还将每个包装在<a>标签中以允许链接.

<a href='http://youtube.com/...' target='_blank'><img class='socIcon' src='images/socYouTube.svg' title='View my videos on YouTube' alt='YouTube' /></a>
Run Code Online (Sandbox Code Playgroud)

这是SVG图形的代码:

<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet href="stylesheets/main.css" type="text/css"?>
<!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" viewBox="0 0 56.69 56.69">
<g>
    <path d="M28.44......./>
</g>
</svg>
Run Code Online (Sandbox Code Playgroud)

我把以下内容放在我的外部CSS文件(main.css)中:

.socIcon g {fill:red;}
Run Code Online (Sandbox Code Playgroud)

但它对图形没有影响.我也尝试过.socIcon g path {}和.socIcon path {}.

有些东西不对,也许我的实现不允许外部CSS修改,或者我错过了一步?我真的很感谢你的帮助!我只需要能够通过我的外部样式表修改SVG图形的颜色,但我不能失去工具提示和链接能力.(虽然我可能没有工具提示,但我可以住.)谢谢!

html css svg external stylesheet

84
推荐指数
6
解决办法
8万
查看次数

使用CSS操作外部svg文件样式属性

我试图通过CSS操纵外部.svg文件.

HTML

<body>
    <div class="mysvg">
    <img src="decho.svg" alt="decho" width="200px"></img>
    </div>
</body>
Run Code Online (Sandbox Code Playgroud)

CSS

div.mysvg img {
    opacity: .3;
    transition: opacity 1s linear 0s;
}
    div.mysvg img:hover {
    opacity: 1;
}
Run Code Online (Sandbox Code Playgroud)

此代码适用于不透明度,但不适用于fill或其他svg特定属性stroke.我知道我不能用img标签这样做,但我一直在寻找几个小时,我找不到正确的方法来做svgobject.

所以基本上,我的问题是,我如何获得与我链接的代码相同的结果,但是能够操作填充,描边等属性并且它必须是外部文件,而不仅仅是粘贴在内部的内联svg代码HTML.

如果有人能够告诉我正确的方法,我会非常感激.谢谢.


编辑:

我设法通过在.svg文件中添加一个css来实现.它必须在svg开始标记之后.

<svg ...>
<style type="text/css" media="screen">  
    <![CDATA[  
    g {  
        fill: yellow;  
        stroke: black;  
        stroke-width: 1;
        transition: fill 1s linear 0s;
    }
    g:hover {
        fill: blue;
    }
    ]]>  
</style> 
<g>
    <path ...>
</g>
</svg> …
Run Code Online (Sandbox Code Playgroud)

html css svg

20
推荐指数
3
解决办法
2万
查看次数

标签 统计

css ×2

html ×2

svg ×2

colors ×1

external ×1

hex ×1

javascript ×1

rgb ×1

stylesheet ×1