如何从 CMS 动态更改背景图像 SVG 的填充值答案

【问题标题】：How to Change the Fill Value of a Background Image SVG Dynamically From CMS如何从 CMS 动态更改背景图像 SVG 的填充值
【发布时间】：2019-03-10 08:36:39
【问题描述】：

我在页面上有一个按钮，其内容显示类似“我是一个按钮>”按钮中的侧胡萝卜符号设置为 :after 来自该按钮上的类的伪类中的 SVG 背景图像.

我希望内容编辑器能够通过 CMS 中的 HEX 颜色选择器更改文本和 SVG 的颜色。根据他们的选择，我目前正在将样式标签附加到按钮上。

我可以毫无问题地更改文本颜色，但我一直在尝试根据他们对样式标签的选择/更新来找出更改 SVG 填充颜色的方法。

我希望能够直接使用样式标签调整颜色，或者以某种方式将 HEX 值传递到我的 SASS 混合中。有没有办法做到这一点？也可以接受其他想法（理想情况下只有 CSS）来实现这一点。谢谢！

HTML：

<a href="#" target="_blank" class="btn" style="color: #E47B8E">I am a button</a>

SASS：

@mixin btn($bgColor: $stdBlue, $radius: 5px, $borColor: transparent, $display: inline-flex, $padding: 15px 40px, $fontSize: 0.88em, $weight: normal, $decorate: none, $color: white, $transform: uppercase, $borderStyle: solid) { 
      background-color: $bgColor;
      border-radius: $radius;
      border-color: $borColor;
      display: $display;
      padding: $padding;
      font-size: $fontSize;
      font-weight: $weight;
      border-style: $borderStyle;
      text-decoration: $decorate;
      color: $color;
      text-transform: $transform;

      &:hover {
        cursor: pointer;
      }

      &:after {
        content: '';
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 6.799 10.477"><path data-name="Path 226" d="M6.8 5.238l-5.24 5.238L0 8.916l3.678-3.678L0 1.56 1.56 0z" fill="#fff"/></svg>');
        width: 7px;
        background-repeat: no-repeat;
        background-position: center;
        margin-left: 5px;
      }
    }

.btn {
    @include btn;
}

【问题讨论】：

标签： html css svg sass content-management-system

【解决方案1】：

所以我最终选择了一条不同的路线，我没有通过背景图像或 CSS 中的内容放置 SVG，而是通过 HTML 实现它并设置了 fill="currentColor"。 currenColor 使 SVG 能够继承按钮中文本的颜色，如 CCMS 中设置的那样。代码如下（以 Craft CMS 上的 Twig 宏的形式）。用于设置 SVG 继承的按钮颜色的代码位于包含宏的单独模板中。

{% macro button(url, text, options={}) %}

  {% set svg %}
    <svg class="btn__arrow" width="7px" height="20px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 6.799 10.477"><path data-name="Path 226" d="M6.8 5.238l-5.24 5.238L0 8.916l3.678-3.678L0 1.56 1.56 0z" fill="currentColor"/></svg>
  {% endset %}

  {% set options = {
      target:'',
      classes:'btn',
      id:'',
      type:'',
      buttonStyle:'',
      linkStyle: '',
      svg: svg,
    } | merge(options) %}

  {% if options.type %}   
    <button {% if options.classes %}class="{{ options.classes }}"{% endif %} {% if options.id %}id="{{ options.id }}"{% endif %} {% if options.buttonStyle %}style="{{ options.buttonStyle }}"{% endif %} type="{{ options.type }}">{{ text | raw }} {% if options.svg | length %}{{ options.svg }}{% endif %}</button>
  {% else %}
    <a href="{{ url }}" {% if options.target %}target="{{ options.target }}"{% endif %} {% if options.classes %}class="{{ options.classes }}"{% endif %} {% if options.id %}id="{{ options.id }}"{% endif %} {% if options.buttonStyle %}style="{{ options.buttonStyle }}"{% endif %} {% if options.linkStyle %} style="{{ options.linkStyle }}"{% endif %}>{{ text | raw }} {% if options.svg | length %}{{ options.svg }}{% endif %}</a>
  {% endif %}
{% endmacro %}

【讨论】：

【解决方案2】：

尝试将url(yourSVGdata) 设置为content。我认为这应该允许您使用 css 定位 SVG。如果 SVG 是外部文件或背景图像，则不能使用 CSS 定位 SVG。

【讨论】：