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

Question

我在页面上有一个按钮，内容是这样的 "I am a button >" 按钮中的侧面胡萝卜符号在 :after pseudo class 中设置为 SVG 背景图像class 在该按钮上。

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

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

我希望能够直接使用样式标签调整颜色，或者以某种方式将 HEX 值传递到我的 SASS mixin 中。有没有办法做到这一点？也接受其他想法（最好是 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;
}

Answer 1

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

Answer 2

所以我最终在这里走了一条不同的路线，而不是通过 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 %}

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

How to Change the Fill Value of a Background Image SVG Dynamically From CMS

html

css

svg

sass

content-management-system