How to insert a SVG img inline in header.php of Wordpress, the purpose is modify the CSS

Question

I am trying to modify the css of a SVG image(the logo) in a header.php of a Wordpress custom theme.

这是 header.php 中的代码：

 <!-- logo -->
    <a class="logo" href="<?php echo home_url(); /* insert home link */ ?>">
      <img src="<?php echo get_stylesheet_directory_uri(); /* add theme path */ ?>/img/logo.svg" alt="<?php bloginfo('title'); /* insert blog title */ ?> ">
    </a>

修改SVG的CSS我要内联，但是不知道怎么做，这个SVG是从Illustrator中保存的。

我尝试添加此 jQuery 脚本，该脚本将 SVG 图像转换为内联 SVG 中的图像，但我看不到浏览器中的图像，如果我看到了元素。

/**
 * Replace all SVG images with inline SVG
 */
    jQuery('img.svg').each(function(){
        var $img = jQuery(this);
        var imgID = $img.attr('id');
        var imgClass = $img.attr('class');
        var imgURL = $img.attr('src');

        jQuery.get(imgURL, function(data) {
            // Get the SVG tag, ignore the rest
            var $svg = jQuery(data).find('svg');

            // Add replaced image's ID to the new SVG
            if(typeof imgID !== 'undefined') {
                $svg = $svg.attr('id', imgID);
            }
            // Add replaced image's classes to the new SVG
            if(typeof imgClass !== 'undefined') {
                $svg = $svg.attr('class', imgClass+' replaced-svg');
            }

            // Remove any invalid XML tags as per http://validator.w3.org
            $svg = $svg.removeAttr('xmlns:a');

            // Replace image with new SVG
            $img.replaceWith($svg);

        }, 'xml');

    });

感谢所有的支持。 卡罗

Answer 1

有多种方法可以使用诸如fill 、 stroke或stroke-width等属性来设置 svg 的样式。 如果您通过代码实际创建图像，这将非常有用，例如：

<svg width="100" height="100">
   <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
   Sorry, your browser does not support inline SVG.
</svg>

您有一个 svg 图像文件并将其用作<img>标记中的src 。

这不是您问题的直接答案，但也许它可以解决您的问题，如果您将图像的其他版本也保存为 svg 文件（应该小于 10kb，因此没有性能问题）并更改src值。

在我读到的评论中，您希望实现暗/亮模式，并且如果选择了另一种模式，您的徽标图像也应该改变，例如：

  document.getElementById("my_image_id").src = "my_image_file.svg";

另一种解决方案是通过 css 进行所有外观更改，并使用 javascript 设置数据主题。 CSS 将为您制作 rest。

您可以使用父级将徽标显示为背景图像：

<a class="logo" href="<?php echo home_url(); ?>">
    <!-- here comes the logo -->
</a>

并在您的 CSS 中：

.logo {
    display: inline-block;
    width: 50px; /*your dimensions*/
    height: 50px;
    background-image: url(my_image_file.svg);
    background-size: cover;
}

如何在没有 jQuery 和最低 Javascript 的情况下创建暗/亮模式

这超出了您的要求，但也许可以帮助您的任务更轻松。 您可以为您的 html 元素赋予一个属性，例如称为data-theme并且您的按钮仅使用 javascript 更改此属性值。

因此，在 html 中：您可以使用切换按钮更改数据主题值（具有良好的过渡）。

<html lang="en" data-theme="light">
    <body>
    .
    .
    .
    <input type="checkbox" id="switch" name="theme" /><label for="switch">Toggle</label>
    .
    .
    .
    <script>

    var checkbox = document.querySelector('input[name=theme]');

    checkbox.addEventListener('change', function() {
        if(this.checked) {
            trans()
            document.documentElement.setAttribute('data-theme', 'dark');
        } else {
            trans()
            document.documentElement.setAttribute('data-theme', 'light');
        }
    })

    let trans = () => {
        document.documentElement.classList.add('transition');
        window.setTimeout(() => {
            document.documentElement.classList.remove('transition');
        }, 1000)
    }

    </script>
    </body>
</html>

这就是 javascript 和 html 部分工作的全部内容。 rest 是 CSS 与普通变量，您设置一次并在您的代码中使用。

html {
    --bg: #AEAEAE;
    --color-headings: #666;
    --logo-source: url(my_light_logo.svg);
}

html[data-theme='dark'] {
    --bg: #333333;
    --color-headings: #FFF;
    --logo-source: url(my_dark_logo.svg);
}

body {
    background-color: var(--bg);
}

h1 {
    color: var(--color-headings);
}

.logo {
    background: var(--logo-source);
}

html.transition,
html.transition *,
html.transition *:before,
html.transition *:after {
    transition: all 750ms !important;
    transition-delay: 0 !important;
}

这样，您可以更改 css 中有关样式的所有内容，并且仅使用按钮上的 javascript 触发数据主题更改。 对我来说，这似乎是实现亮/暗模式的更合乎逻辑的方式，因为 CSS 只是为了造型。

希望它有所帮助，也许是你感兴趣的东西！

Answer 2

 .main-header { background: url(logo.svg) no-repeat top left; background-size: contain; }.no-svg.main-header { background-image: url(logo.png); } something like this.. with the help of CSS.

How to insert a SVG img inline in header.php of Wordpress, the purpose is modify the CSS

问题描述

2 个解决方案

解决方案1
0 已采纳 2020-05-21 11:59:10

解决方案2
-1 2020-05-21 10:59:33

How to insert a SVG img inline in header.php of Wordpress, the purpose is modify the CSS

问题描述

2 个解决方案

解决方案1 0 已采纳 2020-05-21 11:59:10

解决方案2 -1 2020-05-21 10:59:33

解决方案1
0 已采纳 2020-05-21 11:59:10

解决方案2
-1 2020-05-21 10:59:33