像字体图标一样给SVG图标设置颜色

[LingYanSi]

问题：为什么使用要使用svg，iconfont它不香吗？

因为svg更可控，可以按需加载，否则项目中所有的图标都放在一个ttf文件中，字体文件会很大，不利于长期维护。svg文件跟随业务文件，业务文件删除，svg文件跟着删掉就好了。

但字体文件的好处在于，可以像正常文本一样设置color: red，svg如何实现？实现不了的话，svg的应用范围就会受限

在讨论这个问题之前：我们谈论一下，真正的需求是什么 如果是彩色的svg图标，是不需要对图标的颜色进行修改，我们真正想要的是修改纯色的svg图标的颜色

来看一个svg文件，有一个fill属性来指定颜色，那么这个颜色是否支持currentColor呢？尝试了一下，是可以的！

<?xml version="1.0" encoding="UTF-8"?>
<svg width="44px" height="44px" viewBox="0 0 44 44" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <path d="M28.5054135,21.8957108 C28.8372518,22.2374779 29.1678332,22.579245 29.5109841,22.9172426 C33.9349267,27.3489244 38.7884418,31.3302166 44,34.8024445 L34.7952578,44 C31.3209039,38.790645 27.3377448,33.9389716 22.9043851,29.516363 L21.8774461,28.5111657 L21.8774461,28.5111657 C22.4372137,27.878729 23.00997,27.2542502 23.5957149,26.6377292 C24.8149273,27.9660036 25.8925052,29.4175407 26.811027,30.9688732 L30.9590059,26.8224342 C29.4082063,25.9042385 27.9570071,24.8275074 26.6287673,23.6095722 C27.2471933,23.0232071 27.872742,22.45192 28.5054135,21.8957108 Z M26.2541923,0 L38.0671333,11.8085556 C34.540426,13.8863885 31.1925172,16.251689 28.0573363,18.879882 L26.7268105,20.0222743 L26.0406656,20.6389 L26.0406656,20.6389 L25.3592344,21.2649495 C25.1732038,21.4370895 24.9821454,21.60546 24.8023997,21.7801131 C23.6415363,20.4970458 22.6112027,19.1017505 21.7266105,17.6148267 L17.6,21.7399052 C19.0868279,22.6240767 20.4821931,23.6535868 21.7655763,24.813296 L21.5280103,25.0595694 C21.0084655,25.6124279 20.4993953,26.1707312 20.0007999,26.7344794 C16.9040686,30.2387678 14.1453539,34.0275948 11.7614055,38.0504883 L0,26.2934491 C3.64195946,24.1371224 7.09274883,21.673368 10.3146408,18.9291222 C11.8280246,17.6399566 13.3011855,16.2804272 14.7341237,14.850534 C16.1989049,13.3871342 17.5891063,11.8793382 18.9047279,10.327146 C21.6449068,7.1007495 24.1037079,3.64574971 26.2541923,0 Z" 
id="形状" 
fill="#ffffff" 
fill-rule="nonzero"></path>
    </g>
</svg>

但是这需要在代码中写svg，比起字体库的单个class就可以指定图标，有点繁杂了。能否background: url('cdn/icon.svg')指定图标，并可以通过color切换svg图标颜色呢？简单思考了一下，似乎不可以。 因为currentColor是dom/css的一个运行时产物，作为一个图片文件来处理，浏览器肯定不会实时修改器色值的（待考证）

[LingYanSi]

使用svg给confluence/wiki添加水印图片

https://css-tricks.com/probably-dont-base64-svg/

;(function() {
    var name = document.querySelector(`[name="ajs-current-user-fullname"]`).content;
    var svgStr = encodeURIComponent(`<svg viewBox="0 0 100 60" width="100" height="60" xmlns="http://www.w3.org/2000/svg">
    <style> .text { fill: gray; fill-opacity: 0.2; font: italic 13px sans-serif; }   </style>
    <text x="0" y="13" class="text">${name}</text>
    </svg>`)

    var div = document.createElement('div')
    div.style.cssText += `
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1000;
        width: 100%;
        height: 100%;
        pointer-events: none;
        background-image: url(data:image/svg+xml;utf8,${svgStr});
        background-repeat: repeat;
    `

    document.documentElement.appendChild(div)
})();