主页 / 问题 / 1086484
Accepted
Andrey Fedorov
Asked:2020-02-24 00:50:21 +0800 CST2020-02-24 00:50:21 +0800 CST

是否可以更改背景图像中文件给定的 SVG 填充？

  • 772

在服务器端有数据：

$arr[0]['title'] = 'John Smith';
$arr[0]['photo'] = 'img/John Smith.svg';

根据该数据，计算出字符图标的颜色：

$color = '#'.mb_substr(md5($arr[0]['title']),0,3);

根据这些数据，形成了代码：

<style>
.pic {
  background-image: url(".$arr[0]['photo'].");
  fill: ".$color.";
}
</style>

<h2>".$arr[0]['title']."</h2>
<div class="pic">
</div>

如果将 SVG 图像添加到 HTML 内联或 Base64 中，则不会有问题。
但是当它在文件中给出时如何着色呢？

UPD：.pic {--svg-color: ".$color."}在css和svg文件中注册似乎是一个优雅的解决方案style="fill: var(--svg-color)"，但是当图片是背景时它不起作用。(

UPD2：应大众需求，添加了一张图片： 在此处输入图像描述

php

2 个回答

  1. Best Answer

    如果使用标签将 SVG 图标添加为单独的文件<img>，则与使用 CSS 规则添加无法应用颜色更改的位图相同。只能改变颜色background。

    但是有一种方法可以使用过滤器CSS或SVG

    假设添加了钥匙图标<img>：

    img 
{
width:100px;
height:100px;
}
    <img src="https://twemoji.maxcdn.com/svg/1f511.svg">

    使用各种 css 过滤器，我们改变图标的​​颜色：

    .container {
display:inline-block;
width:25%;
height:25%;
padding:1.5em;
background: rgb(123,215,193);
background: linear-gradient(90deg, rgba(123,215,193,1) 4%, rgba(225,233,148,1) 97%);
}
.key {
  height: 3em;
  width: 3em;
 
   }
.grey-out {
  opacity: 0.4;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}
.hue-rotate {
    -webkit-filter: hue-rotate(90deg);
    filter: hue-rotate(90deg);
}
.invert {
  
  -webkit-filter: invert(100%);
  filter: invert(100%);
}
    <div class="container">
<img class="key" src="https://twemoji.maxcdn.com/svg/1f511.svg"> 
  <img class="key grey-out" src="https://twemoji.maxcdn.com/svg/1f511.svg"> 
   <img class="key hue-rotate" src="https://twemoji.maxcdn.com/svg/1f511.svg"> 
    <img class="key invert" src="https://twemoji.maxcdn.com/svg/1f511.svg">
</div>

    例如，如果 svg 文件添加了背景图像： 

    .key {
  background-image: url("https://twemoji.maxcdn.com/svg/1f506.svg");
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center center;
  height: 3em;
  width: 3em;
  margin: 0 0.15em 0 0.3em;
  vertical-align: -0.3em;
  background-size: 3em 3em; 
 }
.grey-out {
  opacity: 0.4;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}
.hue-rotate {
    -webkit-filter: hue-rotate(90deg);
    filter: hue-rotate(90deg);
}
.invert {
   -webkit-filter: invert(100%);
    filter: invert(100%);
}
    <div>
  <span class="key"></span>
  <span class="key grey-out"></span>
  <span class="key hue-rotate"></span>
  <span class="key invert"></span>
</div>

    悬停时更改颜色的选项 

    .container {
display: -webkit-flex; 
display: flex; 
width:35%;
height:35%;
}
.key {
  height: 3em;
  width: 3em;
   padding: 1em;
   transition:  0.8s;
   }
:hover.key{
  height: 4em;
  width: 4em;
    -webkit-filter: hue-rotate(320deg);
     filter: hue-rotate(320deg);
   }
.grey-out {
  opacity: 0.4;
   -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}
.hue-rotate {
    -webkit-filter: hue-rotate(90deg);
    filter: hue-rotate(90deg);

  
}
.invert {
    -webkit-filter: invert(100%);
    filter: invert(100%);
}
    <div class="container">
<img class="key" src="https://twemoji.maxcdn.com/svg/1f511.svg"> 
  <img class="key grey-out" src="https://twemoji.maxcdn.com/svg/1f511.svg"> 
   <img class="key hue-rotate" src="https://twemoji.maxcdn.com/svg/1f511.svg"> 
    <img class="key invert" src="https://twemoji.maxcdn.com/svg/1f511.svg">
</div>

    • 3

  2. 是什么阻止您使用内联样式，并为您的 $color 已经收到的 html 文件着色？就像是<div class="pic"><svg ... fill=".$color."></svg></div>

    • 0

相关问题