web-dev-qa-db-ja.com

管理アイコンのSVGを正しく色分けするにはどうすればよいですか。

Wordpressの管理メニューアイコンに自分のカスタムSVGアイコンを使用しようとしています。

SVGファイルの内容は次のとおりです。

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
    <svg version="1.0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 5000 5000" preserveAspectRatio="xMidYMid meet">
    <path stroke="none" d="M1025 4033 c-131 -18 -314 -89 -435 -168 -93 -60 -252 -218 -309 -305 -127 -195 -181 -379 -181 -615 0 -313 101 -557 319 -776 152 -152 318 -246 517 -292 l91 -22 23 -60 c108 -286 359 -559 642 -698 192 -95 374 -137 598 -137 208 0 358 31 543 110 l90 39 66 -40 c36 -22 102 -52 146 -66 73 -25 93 -27 235 -27 142 0 162 2 235 27 44 14 109 43 143 64 69 41 169 127 203 174 l21 29 -179 -2 -178 -3 -41 55 c-52 70 -90 104 -187 173 -114 82 -290 162 -432 198 -44 11 -96 24 -115 29 l-35 9 3 312 3 311 37 -6 c80 -14 254 -70 408 -132 89 -35 164 -64 168 -64 3 0 6 304 6 675 l0 675 -350 0 -350 0 0 270 0 270 -837 -1 c-461 -1 -851 -4 -868 -6z"/>
    <path stroke="none" d="M4220 2705 c0 -584 3 -795 11 -795 7 0 52 21 101 47 265 140 461 387 545 689 26 92 28 112 28 289 0 177 -2 197 -27 288 -16 54 -47 139 -69 188 l-42 89 -273 0 -274 0 0 -795z"/>
</svg>

管理メニューのアイコンとして使用すると、黒く表示されます。

Screenshot of Icon 

他のワードプレスのメニューアイコンと同じように、アイコンの色を自動的に変えたいです。 このスタックオーバーフロー交換で見つかったアドバイスに従って、私は自分のパスにfill = "black"を追加してみました それはうまくいきませんでした。この問題を引き起こしている私のSVGについて何かがありますか？

wp-adminicon
3
Thomas Harris

コーデックスから：

$ icon_url
[...]
*データURIを使用してbase64でエンコードされたSVGを渡します。データURIはカラースキームに合わせて色付けされます。これは 'data：image/svg + xml; base64'で始まります。

ファイルURLの代わりにSVGコンテンツを使用すると、WordpressはSVGの色を変更します。 （色の変更を担当するJSコードはsvg-Painter.jsファイルにあります。）

fill属性をpathに追加する必要があります。そうしないと、色がWPによって自動的に変更されません。

add_menu_pageまたはadd_submenu_pageを使用してページを登録するときは、SVGデータを$icon_urlパラメーターに直接追加してください。

例 ：

アイコンデータ：

//$myicon = base64encode(
//    '<svg version="1.0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 5000 5000" preserveAspectRatio="xMidYMid meet" >'  
//        . '<path fill="black" stroke="none" d="M1025 4033 c-131 -18 -314 -89 -435 -168 -93 -60 -252 -218 -309 -305 -127 -195 -181 -379 -181 -615 0 -313 101 -557 319 -776 152 -152 318 -246 517 -292 l91 -22 23 -60 c108 -286 359 -559 642 -698 192 -95 374 -137 598 -137 208 0 358 31 543 110 l90 39 66 -40 c36 -22 102 -52 146 -66 73 -25 93 -27 235 -27 142 0 162 2 235 27 44 14 109 43 143 64 69 41 169 127 203 174 l21 29 -179 -2 -178 -3 -41 55 c-52 70 -90 104 -187 173 -114 82 -290 162 -432 198 -44 11 -96 24 -115 29 l-35 9 3 312 3 311 37 -6 c80 -14 254 -70 408 -132 89 -35 164 -64 168 -64 3 0 6 304 6 675 l0 675 -350 0 -350 0 0 270 0 270 -837 -1 c-461 -1 -851 -4 -868 -6z"/>'
//        . '<path fill="black" stroke="none" d="M4220 2705 c0 -584 3 -795 11 -795 7 0 52 21 101 47 265 140 461 387 545 689 26 92 28 112 28 289 0 177 -2 197 -27 288 -16 54 -47 139 -69 188 l-42 89 -273 0 -274 0 0 -795z"/>'
//    . '</svg> '
//);

// after encoding
$myicon = 'PHN2ZyB2ZXJzaW9uPSIxLjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDUwMDAgNTAwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQgbWVldCI+CiAgICA8cGF0aCBmaWxsPSJibGFjayIgc3Ryb2tlPSJub25lIiBkPSJNMTAyNSA0MDMzIGMtMTMxIC0xOCAtMzE0IC04OSAtNDM1IC0xNjggLTkzIC02MCAtMjUyIC0yMTggLTMwOSAtMzA1IC0xMjcgLTE5NSAtMTgxIC0zNzkgLTE4MSAtNjE1IDAgLTMxMyAxMDEgLTU1NyAzMTkgLTc3NiAxNTIgLTE1MiAzMTggLTI0NiA1MTcgLTI5MiBsOTEgLTIyIDIzIC02MCBjMTA4IC0yODYgMzU5IC01NTkgNjQyIC02OTggMTkyIC05NSAzNzQgLTEzNyA1OTggLTEzNyAyMDggMCAzNTggMzEgNTQzIDExMCBsOTAgMzkgNjYgLTQwIGMzNiAtMjIgMTAyIC01MiAxNDYgLTY2IDczIC0yNSA5MyAtMjcgMjM1IC0yNyAxNDIgMCAxNjIgMiAyMzUgMjcgNDQgMTQgMTA5IDQzIDE0MyA2NCA2OSA0MSAxNjkgMTI3IDIwMyAxNzQgbDIxIDI5IC0xNzkgLTIgLTE3OCAtMyAtNDEgNTUgYy01MiA3MCAtOTAgMTA0IC0xODcgMTczIC0xMTQgODIgLTI5MCAxNjIgLTQzMiAxOTggLTQ0IDExIC05NiAyNCAtMTE1IDI5IGwtMzUgOSAzIDMxMiAzIDMxMSAzNyAtNiBjODAgLTE0IDI1NCAtNzAgNDA4IC0xMzIgODkgLTM1IDE2NCAtNjQgMTY4IC02NCAzIDAgNiAzMDQgNiA2NzUgbDAgNjc1IC0zNTAgMCAtMzUwIDAgMCAyNzAgMCAyNzAgLTgzNyAtMSBjLTQ2MSAtMSAtODUxIC00IC04NjggLTZ6Ii8+CiAgICA8cGF0aCBmaWxsPSJibGFjayIgc3Ryb2tlPSJub25lIiBkPSJNNDIyMCAyNzA1IGMwIC01ODQgMyAtNzk1IDExIC03OTUgNyAwIDUyIDIxIDEwMSA0NyAyNjUgMTQwIDQ2MSAzODcgNTQ1IDY4OSAyNiA5MiAyOCAxMTIgMjggMjg5IDAgMTc3IC0yIDE5NyAtMjcgMjg4IC0xNiA1NCAtNDcgMTM5IC02OSAxODggbC00MiA4OSAtMjczIDAgLTI3NCAwIDAgLTc5NXoiLz4KPC9zdmc+IA==';

Svgアイコン付きのメニューページを追加する：

add_menu_page( $page_title, $menu_title, 
       $capability, $menu_slug, $callback,
       // your icon
       'data:image/svg+xml;base64,' . $myicon
);
3
nmr