web-dev-qa-db-ja.com

base-64背景画像データとして使用するときにsvg塗りつぶし色を変更する方法は？

私はプロジェクトにSVGを使用しており、次のようなcssでロードされています。

background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20version%3D%221.1%22%20x%3D%220px%22%20y%3D%220px%22%20width%3D%2222px%22%20height%3D%2238px%22%20viewBox%3D%220%200%2022%2038%22%20enable-background%3D%22new%200%200%2022%2038%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%3E.style0%7Bfill%3A%09%23f47216%3B%7D%3C/style%3E%3Cpath%20d%3D%22M2.643%2038c-0.64%200-1.282-0.231-1.79-0.699c-1.074-0.988-1.143-2.661-0.154-3.735l13.13-14.258L0.664%204.4%20c-0.967-1.094-0.865-2.765%200.229-3.732s2.765-0.864%203.7%200.229L19.37%2017.592c0.898%201%200.9%202.545-0.035%203.542L4.588%2037.1%20C4.067%2037.7%203.4%2038%202.6%2038z%22%20class%3D%22style0%22/%3E%3C/svg%3E');

矢印の塗りつぶし色を変更して、強調表示するホバー状態がいくつかあります。

今のところ、同じsvgデータを塗りつぶし部分（fill％3A％09％23f47216％3B％7D％3Cでf47216は色）を右/新しい色に変更して適用しています。かなりうまくいきます。ただし、他のよりスマートな方法があるかどうかを知りたいです。

csssvgbackgroundfill
25
Luca Reghellin

CSSの filter プロパティを使用します。私にとっては、ホバー上でアイコンの色を白に変更したかったのです。

filter: grayscale(1) brightness(2);
15
JerryGoyal

そのためのBase64は次のようになります。

url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMjJweCIgaGVpZ2h0PSIzOHB4IiB2aWV3Qm94PSIwIDAgMjIgMzgiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIyIDM4IiB4bWw6c3BhY2U9InByZXNlcnZlIj48c3R5bGU+LnN0eWxlMHtmaWxsOgkjZjQ3MjE2O308L3N0eWxlPjxwYXRoIGQ9Ik0yLjY0MyAzOGMtMC42NCAwLTEuMjgyLTAuMjMxLTEuNzktMC42OTljLTEuMDc0LTAuOTg4LTEuMTQzLTIuNjYxLTAuMTU0LTMuNzM1bDEzLjEzLTE0LjI1OEwwLjY2NCA0LjQgYy0wLjk2Ny0xLjA5NC0wLjg2NS0yLjc2NSAwLjIyOS0zLjczMnMyLjc2NS0wLjg2NCAzLjcgMC4yMjlMMTkuMzcgMTcuNTkyYzAuODk4IDEgMC45IDIuNTQ1LTAuMDM1IDMuNTQyTDQuNTg4IDM3LjEgQzQuMDY3IDM3LjcgMy40IDM4IDIuNiAzOHoiIGNsYXNzPSJzdHlsZTAiLz48L3N2Zz4=');

http://www.base64encode.org/ のようなツールを使用する

これはあなたの質問に直接答えるものではありませんが、次のことを可能にします。次のことを確認するためにテストできます。

.icon:hover .style0 {
    fill: red;
}

動作する、または使用します

.icon {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMjJweCIgaGVpZ2h0PSIzOHB4IiB2aWV3Qm94PSIwIDAgMjIgMzgiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIyIDM4IiB4bWw6c3BhY2U9InByZXNlcnZlIj48c3R5bGU+LnN0eWxlMHtmaWxsOgkjZjQ3MjE2O308L3N0eWxlPjxwYXRoIGQ9Ik0yLjY0MyAzOGMtMC42NCAwLTEuMjgyLTAuMjMxLTEuNzktMC42OTljLTEuMDc0LTAuOTg4LTEuMTQzLTIuNjYxLTAuMTU0LTMuNzM1bDEzLjEzLTE0LjI1OEwwLjY2NCA0LjQgYy0wLjk2Ny0xLjA5NC0wLjg2NS0yLjc2NSAwLjIyOS0zLjczMnMyLjc2NS0wLjg2NCAzLjcgMC4yMjlMMTkuMzcgMTcuNTkyYzAuODk4IDEgMC45IDIuNTQ1LTAuMDM1IDMuNTQyTDQuNTg4IDM3LjEgQzQuMDY3IDM3LjcgMy40IDM4IDIuNiAzOHoiIGNsYXNzPSJzdHlsZTAiLz48L3N2Zz4=');
    height: 40px;
    width: 40px;
}

.icon:hover {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMjJweCIgaGVpZ2h0PSIzOHB4IiB2aWV3Qm94PSIwIDAgMjIgMzgiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIyIDM4IiB4bWw6c3BhY2U9InByZXNlcnZlIj48c3R5bGU+LnN0eWxlMHtmaWxsOglyZWQ7fTwvc3R5bGU+PHBhdGggZD0iTTIuNjQzIDM4Yy0wLjY0IDAtMS4yODItMC4yMzEtMS43OS0wLjY5OWMtMS4wNzQtMC45ODgtMS4xNDMtMi42NjEtMC4xNTQtMy43MzVsMTMuMTMtMTQuMjU4TDAuNjY0IDQuNCBjLTAuOTY3LTEuMDk0LTAuODY1LTIuNzY1IDAuMjI5LTMuNzMyczIuNzY1LTAuODY0IDMuNyAwLjIyOUwxOS4zNyAxNy41OTJjMC44OTggMSAwLjkgMi41NDUtMC4wMzUgMy41NDJMNC41ODggMzcuMSBDNC4wNjcgMzcuNyAzLjQgMzggMi42IDM4eiIgY2xhc3M9InN0eWxlMCIvPjwvc3ZnPg==');
}

変更したいのが色だけである場合、ホバーに対して同じ情報を大量に複製することを余儀なくされるため、これは非効率的なようです。

実施例

12
Jason Aller

または、動的に実行したい場合：

var green = '3CB54A';
var red = 'ED1F24';
var svg = '<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"  width="320px" height="100px" viewBox="0 0 320 100" enable-background="new 0 0 320 100" xml:space="preserve"> <polygon class="mystar" fill="#'+green+'" points="134.973,14.204 143.295,31.066 161.903,33.77 148.438,46.896 151.617,65.43 134.973,56.679 118.329,65.43 121.507,46.896 108.042,33.77 126.65,31.066 "/><circle class="mycircle" fill="#'+red+'" cx="202.028" cy="58.342" r="12.26"/></svg>';      
var encoded = window.btoa(svg);
document.body.style.background = "url(data:image/svg+xml;base64,"+encoded+")";

ここでフィドル

9
tnt-rox