相关疑难解决方法(0)

如何使用CSS(jQuery SVG图像替换)更改SVG图像的颜色？

这是我提出的一个方便的代码的自我问答.

目前,没有一种简单的方法来嵌入SVG图像,然后通过CSS访问SVG元素.有各种使用JS SVG框架的方法,但如果你所做的只是制作一个带有翻转状态的简单图标,它们就会过于复杂.

所以这就是我提出的,我认为这是迄今为止在网站上使用SVG文件的最简单方法.它从早期的文本到图像替换方法中采用了它的概念,但据我所知,SVG从未做过.

这是个问题:

如何在不使用JS-SVG框架的情况下嵌入SVG并在CSS中更改其颜色？

css jquery svg

Dre*_*ker

2015 09-14

428
推荐指数

11
解决办法

64万
查看次数

如何仅使用CSS过滤器将黑色转换为任何给定的颜色

我的问题是:给定目标RGB颜色,#000使用CSS滤镜将黑色()重新着色为该颜色的公式是什么？

为了接受答案,它需要提供一个函数(以任何语言)接受目标颜色作为参数并返回相应的CSS filter字符串.

对此的上下文是需要在a内重新着色SVG background-image.在这种情况下,它是支持KaTeX中的某些TeX数学特性:https: //github.com/Khan/KaTeX/issues/587.

例

如果目标颜色为#ffff00(黄色),则一个正确的解决方案是:

filter: invert(100%) sepia() saturate(10000%) hue-rotate(0deg)

Run Code Online (Sandbox Code Playgroud)

(演示)

非目标

动画.
非CSS过滤器解决方案.
从黑色以外的颜色开始.
关心黑色以外的颜色会发生什么.

结果到目前为止

强力搜索固定过滤器列表的参数:https
://stackoverflow.com/a/43959856/181228缺点:效率低下,只生成一些16,777,216种可能的颜色(676,248 hueRotateStep=1).
使用SPSA的更快的搜索解决方案:https : //stackoverflow.com/a/43960991/181228 Bounty奖励
一个drop-shadow解决方案: /sf/answers/3077189741/
缺点:不上边缘运行.需要非filterCSS更改和次要HTML更改.

您仍然可以通过提交非暴力解决方案获得接受的答案!

资源

如何hue-rotate和sepia计算: /sf/answers/2066480321/ 例的Ruby实现:
```
LUM_R = 0.2126; LUM_G = 0.7152; LUM_B = 0.0722
HUE_R = 0.1430; HUE_G = 0.1400; HUE_B = …
```
Run Code Online (Sandbox Code Playgroud)

javascript css math algebra css-filters

gle*_*ebm

2019 08-03

91
推荐指数

6
解决办法

1万
查看次数

如何使用外部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

Jor*_*n H

lucky-day

84
推荐指数

6
解决办法

8万
查看次数

(Next.js) 如何更改 next/image 中 SVG 的颜色？

import Image from 'next/image'

...

<Image src="/emotion.svg" alt="emtion" width={50} height={50} />

Run Code Online (Sandbox Code Playgroud)

我想更改中的 SVG 颜色next/image。

但在 CSS 中，

img {
  fill="#ffffff"
}

Run Code Online (Sandbox Code Playgroud)

不管用。

我该如何解决这个问题？

css reactjs styled-components next.js nextjs-image

Dan*_*n1y

2021 01-12

34
推荐指数

4
解决办法

6万
查看次数

如何在反应中为我的 svg 图像添加颜色

我有一个图标列表。我想将图标颜色更改为白色。默认情况下，我的图标是黑色的。有什么建议吗？

我通常'fill: white'在我的 css 中使用，但现在我在 React 中这样做......它不起作用！

import React from 'react'
import menuIcon from '../img/menu.svg';
import homeIcon from '../img/home.svg';


<ul>
   <li>
    <a href="/" className="sidebar__link">
     <img src={menuIcon} alt="sidebar icon" className="sidebar__icon" />
    </a>
   </li>
   <li>
    <a href="/" className="sidebar__link">
     <img src={homeIcon} alt="sidebar icon" className="sidebar__icon" />
    </a>
   </li>
</ul>



.sidebar__icon {
 fill: #FFFFF;
 width: 3.2rem;
 height: 3.2rem;
}

Run Code Online (Sandbox Code Playgroud)

html css reactjs

Dee*_*jay

2019 02-05

29
推荐指数

7
解决办法

7万
查看次数

为什么/**/comments在样式表中起作用,但//注释不起作用？

有这么好的理由吗？Lame问题,但我只是想知道是否有原因.

css comments code-comments

lee*_*d00

lucky-day

24
推荐指数

3
解决办法

1762
查看次数

使用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标签这样做,但我一直在寻找几个小时,我找不到正确的方法来做svg或object.

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

dec*_*cho

2014 03-07

20
推荐指数

3
解决办法

2万
查看次数

如何使用 Tailwind 修改 svg 图标颜色

我正在使用 TailwindCSS 并想更改 svg 的颜色。如果没有 Tailwind，这里之前已经问过这个问题，对于 2020 年，这应该是一个很好的答案，但 Tailwind 不支持这些过滤器。文档中有一个关于如何使用 svg 图标的指南，但本教程没有文件，只有纯文本路径。

我下载了 svg 文件并将 svg 的路径分配给图像的src标签。以下示例显示了我的问题，我希望图标的背景为红色，图标的颜色为蓝色。不幸的是，我无法更改图标颜色。

<link href="https://unpkg.com/tailwindcss@1.8.10/dist/tailwind.min.css" rel="stylesheet" />

<!-- taken from here https://www.iconfinder.com/icons/765208/media_twitter_social_icon -->
<img class="fill-current bg-red-500 text-blue-500" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjxzdmcgaGVpZ2h0PSI2MHB4IiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA2MCA2MCIgd2lkdGg9IjYwcHgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6c2tldGNoPSJodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2gvbnMiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48dGl0bGUvPjxkZXNjLz48ZGVmcy8+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBpZD0iYmxhY2siIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIj48ZyBpZD0ic2xpY2UiLz48ZyBmaWxsPSIjMDAwMDAwIiBpZD0idHdpdHRlciIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTMuMDAwMDAwLCAxNi4wMDAwMDApIj48cGF0aCBkPSJNMjguMDUyMTM4NSwyLjQzNjY5NDI3IEMyNi44NDMxODQ2LDEuMDYyMjAxNSAyNS4xMjA1Mzg1LDAuMTg2NDY0MTA1IDIzLjIxNDA2MTUsMC4xNTQ3MzEwMjggQzE5LjU1MzYsMC4wOTM4MDMwOTA1IDE2LjU4NTY1MzgsMy4xODY5MjMzOSAxNi41ODU2NTM4LDcuMDYzMTE2MDQgQzE2LjU4NTY1MzgsNy42MTMyNDExOCAxNi42NDQyOTIzLDguMTQ5NjkzMzcgMTYuNzU3MzY5Miw4LjY2NDY3MzE2IEMxMS4yNDg1ODQ2LDguMzA3MzUyNTcgNi4zNjQ0NjkyMyw1LjQzODc3MDU5IDMuMDk1NDE1MzgsMS4xMTQ3MjE4IEMyLjUyNDg2MTU0LDIuMTUwODYxNyAyLjE5NzkwNzY5LDMuMzYxODgyNzEgMi4xOTc5MDc2OSw0LjY1OTE1MDM3IEMyLjE5NzkwNzY5LDcuMTE0OTg4NDQgMy4zNjgwOTIzMSw5LjI5NDUyNzI0IDUuMTQ2NjMwNzcsMTAuNTgxNDE3NCBDNC4wNjAxMjMwOCwxMC41MzM0NDk5IDMuMDM4MDY5MjMsMTAuMjA0NTM3OCAyLjE0NDQzODQ2LDkuNjY0OTUyMDMgQzIuMTQzNzkyMzEsOS42OTQ0NDQ5NyAyLjE0Mzc5MjMxLDkuNzIzOTQ0OTQgMi4xNDM3OTIzMSw5Ljc1Mzk2MjQ1IEMyLjE0Mzc5MjMxLDEzLjE4MzU0OTcgNC40Mjg1OTIzMSwxNi4wNjA3MDc2IDcuNDYwODMwNzcsMTYuNzMwOTM4MyBDNi45MDQ2NTM4NSwxNi44ODg1MzggNi4zMTkwNzY5MiwxNi45NzEwMTYzIDUuNzE0NiwxNi45NjcwMDggQzUuMjg3NDkyMzEsMTYuOTY0MTc1OCA0Ljg3MjE3NjkyLDE2LjkxNjgxMTggNC40Njc1MjMwOCwxNi44MzE3NjggQzUuMzEwOTE1MzgsMTkuNjQ0Mzc3NyA3Ljc1ODcwNzY5LDIxLjY5Njc2NjMgMTAuNjU5MjkyMywyMS43NjQ2MjggQzguMzkwODA3NjksMjMuNjQ3Njk2MyA1LjUzMjg2OTIzLDI0Ljc2OTE5MzMgMi40MjcyOTIzMSwyNC43NjI3ODcgQzEuODkyMjc2OTIsMjQuNzYxNjgzMyAxLjM2NDY5MjMxLDI0LjcyNzExMiAwLjg0NjE1Mzg0NiwyNC42NjA1OTk2IEMzLjc3OTUzMDc3LDI2LjY3MzMxMzkgNy4yNjM1OTIzMSwyNy44NDUxNzExIDExLjAwNjc2MTUsMjcuODQ2MTUzMSBDMjMuMTk4NTUzOCwyNy44NDkzNTE4IDI5Ljg2NTczMDgsMTcuMjM5NTEwOSAyOS44NjU3MzA4LDguMDM2NzY4NjggQzI5Ljg2NTczMDgsNy43MzQ4MzYzMiAyOS44NTkxMDc3LDcuNDM0NTE5MTIgMjkuODQ2NTA3Nyw3LjEzNTY1MTk1IEMzMS4xNDE1NjE1LDYuMTcwNjY2NDUgMzIuMjY1MjIzMSw0Ljk2MDc4OTE1IDMzLjE1Mzg0NjIsMy41NzkyMTkwMSBDMzEuOTY1MjQ2Miw0LjExNTAxNjE1IDMwLjY4NzYzODUsNC40NzA4Njg2MyAyOS4zNDcwMzA4LDQuNjIwMTM3ODkgQzMwLjcxNTQyMzEsMy43Nzc5NjUxOCAzMS43NjY1NTM4LDIuNDMwMDk2MDcgMzIuMjYxMzQ2MiwwLjgxMzc1ODQwNCBDMzAuOTgwNTA3NywxLjU5MDQ5MjI5IDI5LjU2MjAzODUsMi4xNDc1MTI4NiAyOC4wNTIxMzg1LDIuNDM2Njk0MjcgWiIvPjwvZz48L2c+PC9zdmc+">

Run Code Online (Sandbox Code Playgroud)

下载 svg 图标并通过链接资产路径直接使用它们时，正确的工作流程是什么？我想要实现的就是这样的

<a href="https://twitter.com" target="_blank">
  <img src="pathToSvgInAssetsFolder" />
</a>

Run Code Online (Sandbox Code Playgroud)

并将图标颜色设置为自定义 Tailwind 颜色，例如red-500。因此，每当我想更改图标颜色时，我都可以简单地修改颜色类。

有人知道怎么做吗？

html css tailwind-css

Que*_*n3r

2020 10-05

9
推荐指数

2
解决办法

8088
查看次数

为什么webkit过滤器上的堆叠顺序更改悬停？

在应用webkit过滤器时,我注意到堆叠顺序存在一个奇怪的问题.为什么当我将鼠标悬停在图像上时堆叠顺序会发生变化？

我宁愿不必使用z-indexing来解决这个问题,因为它会破坏其他网站元素.

这是我的JSFiddle http://jsfiddle.net/r13ycy1p/

请原谅荷马,我只需要一张图片.

编辑:如何反转效果以阻止绝对位置div被隐藏？

这是我的HTML

<ul>
<li>
    <a href="#">
        <div class="slide-content">
            <div class="slide-title">
                <h1>hello world</h1>
            </div>
            <div class="slide-desc">
                <p>a description about something</p>
            </div>
        </div>
        <img src="http://img4.wikia.nocookie.net/__cb20130920142351/simpsons/images/e/e9/Pic_1187696292_8.jpg"/>

    </a>
</li>
</ul>

Run Code Online (Sandbox Code Playgroud)

CSS

li {
list-style:none;    
}

.slide-content {
position:absolute;
color:red;
top:50px;
}

li a:hover img{
-webkit-filter: grayscale(100%); /* For Webkit browsers */
}

Run Code Online (Sandbox Code Playgroud)

css webkit z-index filter

Kin*_*uie

2014 09-10

6
推荐指数

1
解决办法

2073
查看次数