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