相关疑难解决方法(0)

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

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

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

这是个问题:

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

我有一个透明的彩色png图像.我想使用css过滤器使整个图像变白,但保持透明度不变.这有可能在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)

(演示)

非目标

• 动画.
• 非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)

我有一个SVG文件,我想用它制作一个SvgIcon组件,我应该怎么做？

在文档中,所有示例都使用预定义的材质图标或奇怪的符号<path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />,我不知道它是什么!

我在我的html文件中使用此svg标记.它在Chrome中完美运行,但在Safari中,图标不会出现

<svg width="25" height="23" viewBox="0 0 25 23">
       <use href="./icons.svg#helemet"></use>
 </svg>

谁知道为什么？

所以我试图制作一个简单的文本路径.svg,它是一个带有一些文本的垂直线.我得到的问题是标签似乎抛弃了一切.我认为它与我的xlink:href有关但我似乎无法确切地说明究竟是什么.

<svg version="1.1"
     baseProfile="full"
     width="20" height="600"
     xmlns="http://www.w3.org/2000/svg">
     
   <defs>
          <path id="testPath" d="M 10 10 L 10 600 z"
         stroke="black" stroke-width="3" />
   </defs>
   
   <text>
      <textpath xlink:href="#testPath">
         teeeest
      </textpath>
   </text>
   
</svg>

任何帮助,将不胜感激.

我有一个 svg 文件，例如 a.svg，其内容为：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50">
    <g fill="none" fill-rule="evenodd">
        <line x1="25" y1="15" x2="35" y2="24.6" stroke-width="3" stroke-linecap="round"/>
        <line x1="25" y1="35" x2="35" y2="24.6" stroke-width="3" stroke-linecap="round"/>
    </g>
</svg>

svg 没有描边颜色，但是当我使用如下标签导入此 svg 时，我希望能够在 css 中设置描边颜色：

HTML：

<img src="a.svg">

CSS：

img {
    stroke: red;
    /* This doesn't work */
}

我怎样才能做到这一点？

我的html文件中有以下svg图像:

<img class="svg" src="my-image-link.svg">

现在,我正在尝试使用此css代码更改颜色:

.svg path {
    fill: black;
}

然而,没有任何改变.使用css更改svg图像路径颜色的正确方法是什么？谢谢!

我试图在图像/对象标签中设置SVG动画,但它无法正常工作

svg {
  width: 100%;
  height: 200px;
}

.rotate-45 {
  transform-origin: center;
  transform: rotate(45deg);
}

.rotate {
  transform-origin: center;
  animation: rotate 1s ease-in-out infinite;
}

.rotate-back {
  transform-origin: center;
  animation: rotate 1s ease-in-out infinite;
  animation-direction: alternate;
}

.left {
  animation: move 1s ease-in-out infinite;
}

.right {
  animation: move 1s ease-in-out infinite;
}

@keyframes rotate {
  100% {
    transform: rotate(calc(90deg + 45deg));
  }
}

@keyframes move {
  50% {
    transform: translate(-30px, -30px);
  }
}

 <svg width="100%" height="100%" viewBox="0 0 1000 …

我有一个component.html嵌入我的 svg 组件的：

<masterflex-sidebar>
    <masterflex-logo sidebar-logo color="white">

    </masterflex-logo>
</masterflex-sidebar>

我的logo.ts文件：

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'masterflex-logo',
  templateUrl: './masterflex.component.html',
  styleUrls: ['./masterflex.component.scss']
})
export class MasterflexComponent implements OnInit {

  @Input() color:string

  constructor() { }

  ngOnInit() {
  }

}

我的 svg 组件（其中的一部分）：

<svg 
    version="1.1" 
    xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" 
    x="0px" y="0px"
    viewBox="0 0 237.4 35.9"
    height="35.9"
    width="237.4"
    xml:space="preserve" *ngIf="color">

我希望能够将我的 svg 组件的颜色更改为我想要的任何颜色（在我的第一个组件中设置 color="white"）并将该颜色应用于我的 svg。有没有办法将该颜色属性传递给 scss 样式？