如何使我的管理图标SVG颜色正确?

时间:2018-08-14 作者:Thomas Harris

我正在尝试将自己的自定义SVG图标用于Wordpress管理菜单图标。

以下是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

我想让图标像其他wordpress菜单图标一样自动上色。我尝试根据找到的建议将fill=“black”添加到路径中in this stack overflow exchange 但它没有起作用。我的SVG是否存在导致此问题的原因?

1 个回复
最合适的回答,由SO网友:nmr 整理而成

抄本:

$icon\\u url
*使用数据URI传递base64编码的SVG,该URI将被着色以匹配颜色方案。这应该从“数据:图像/svg+xml;base64\'。

如果使用SVG内容而不是文件URL,Wordpress将更改SVG的颜色。(负责更改颜色的JS代码位于svg-painter.js 文件。)

您必须添加fill 把某事归因于某人path, 否则,WP不会自动更改颜色。

当您向注册页面时add_menu_pageadd_submenu_page, 将SVG数据直接添加到$icon_url 参数

Example:

图标数据:

//$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
);

结束

相关推荐

访问wp-admin/plugin-install.php时获取404

虽然刚安装,但我无法访问“添加新插件”页面。它只是一直在等待&;然后将我重定向到当前主题的404页。我不确定是什么地方出了问题,因为wordpress是新安装的。Wordpress版本为4.9.6;我正在使用PHP7作为主机。我尝试了针对类似问题提出的解决方案,但无法修复。当我在“已安装插件”页面时,也会收到此消息Warning: An unexpected error occurred. Something may be wrong with WordPress.org or this serve