如何在base64编码后保持<img/> xlink:href工作

时间:2016-11-13 20:37:37

标签: html css image svg base64

我使用SVG编码为base64,以显示在我的.html页面中。

我一直在使用fill的基本形状,但现在, 我正在尝试使用带有背景图像的SVG,该背景图像应用于以下行:

<image overflow="visible" width="650" height="882" xlink:href="<path>" transform="matrix(0.266 0 0 0.266 1.04 0)">

以下是整个svg

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
    <!ENTITY ns_extend "http://ns.adobe.com/Extensibility/1.0/">
    <!ENTITY ns_ai "http://ns.adobe.com/AdobeIllustrator/10.0/">
    <!ENTITY ns_graphs "http://ns.adobe.com/Graphs/1.0/">
    <!ENTITY ns_vars "http://ns.adobe.com/Variables/1.0/">
    <!ENTITY ns_imrep "http://ns.adobe.com/ImageReplacement/1.0/">
    <!ENTITY ns_sfw "http://ns.adobe.com/SaveForWeb/1.0/">
    <!ENTITY ns_custom "http://ns.adobe.com/GenericCustomNamespace/1.0/">
    <!ENTITY ns_adobe_xpath "http://ns.adobe.com/XPath/1.0/">
]>
<svg version="1.1" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="175px" height="199.55px"
     viewBox="0 0 175 199.55" enable-background="new 0 0 175 199.55" xml:space="preserve">
<metadata>
</metadata>
<g id="Capa_2">
</g>
<g id="Capa_1">
    <g>
        <defs>
            <path id="svg_1" d="M78.854,4.932c5.764-3.328,11.528-3.328,17.292,0l69.168,39.934c5.764,3.328,8.646,8.32,8.646,14.976v79.867
                c0,6.656-2.883,11.648-8.646,14.976l-69.168,39.935c-5.764,3.327-11.528,3.327-17.292,0L9.686,154.684
                c-5.764-3.327-8.646-8.319-8.646-14.976V59.841c0-6.656,2.882-11.647,8.646-14.976L78.854,4.932z"/>
        </defs>
        <clipPath id="svg_1_1_">
            <use xlink:href="#svg_1"  overflow="visible"/>
        </clipPath>
        <g transform="matrix(1 0 0 1 6.741370e-008 0)" clip-path="url(#svg_1_1_)">
            <image overflow="visible" width="650" height="882" xlink:href="/assets/img/hexagon/1b9a4fb722.jpg"  transform="matrix(0.266 0 0 0.266 1.04 0)">
            </image>
        </g>
    </g>
</g>
</svg>

稍后,已编码为base64css将如下所示:

/* file size: 1.9ko | optimized file size: 1.7ko | base64 size: 2.2ko */
.doubleduecemenu {
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiIFs8IUVOVElUWSBuc19leHRlbmQgImh0dHA6Ly9ucy5hZG9iZS5jb20vRXh0ZW5zaWJpbGl0eS8xLjAvIj48IUVOVElUWSBuc19haSAiaHR0cDovL25zLmFkb2JlLmNvbS9BZG9iZUlsbHVzdHJhdG9yLzEwLjAvIj48IUVOVElUWSBuc19ncmFwaHMgImh0dHA6Ly9ucy5hZG9iZS5jb20vR3JhcGhzLzEuMC8iPjwhRU5USVRZIG5zX3ZhcnMgImh0dHA6Ly9ucy5hZG9iZS5jb20vVmFyaWFibGVzLzEuMC8iPjwhRU5USVRZIG5zX2ltcmVwICJodHRwOi8vbnMuYWRvYmUuY29tL0ltYWdlUmVwbGFjZW1lbnQvMS4wLyI+PCFFTlRJVFkgbnNfc2Z3ICJodHRwOi8vbnMuYWRvYmUuY29tL1NhdmVGb3JXZWIvMS4wLyI+PCFFTlRJVFkgbnNfY3VzdG9tICJodHRwOi8vbnMuYWRvYmUuY29tL0dlbmVyaWNDdXN0b21OYW1lc3BhY2UvMS4wLyI+PCFFTlRJVFkgbnNfYWRvYmVfeHBhdGggImh0dHA6Ly9ucy5hZG9iZS5jb20vWFBhdGgvMS4wLyI+XT48c3ZnIHZlcnNpb249IjEuMSIgeG1sbnM6eD0iJm5zX2V4dGVuZDsiIHhtbG5zOmk9IiZuc19haTsiIHhtbG5zOmdyYXBoPSImbnNfZ3JhcGhzOyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSIxNzVweCIgaGVpZ2h0PSIxOTkuNTVweCIgdmlld0JveD0iMCAwIDE3NSAxOTkuNTUiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDE3NSAxOTkuNTUiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxtZXRhZGF0YT48L21ldGFkYXRhPjxnIGlkPSJDYXBhXzIiPjwvZz48ZyBpZD0iQ2FwYV8xIj48Zz48ZGVmcz48cGF0aCBpZD0ic3ZnXzEiIGQ9Ik03OC44NTQsNC45MzJjNS43NjQtMy4zMjgsMTEuNTI4LTMuMzI4LDE3LjI5MiwwbDY5LjE2OCwzOS45MzRjNS43NjQsMy4zMjgsOC42NDYsOC4zMiw4LjY0NiwxNC45NzZ2NzkuODY3YzAsNi42NTYtMi44ODMsMTEuNjQ4LTguNjQ2LDE0Ljk3NmwtNjkuMTY4LDM5LjkzNWMtNS43NjQsMy4zMjctMTEuNTI4LDMuMzI3LTE3LjI5MiwwTDkuNjg2LDE1NC42ODRjLTUuNzY0LTMuMzI3LTguNjQ2LTguMzE5LTguNjQ2LTE0Ljk3NlY1OS44NDFjMC02LjY1NiwyLjg4Mi0xMS42NDcsOC42NDYtMTQuOTc2TDc4Ljg1NCw0LjkzMnoiLz48L2RlZnM+PGNsaXBQYXRoIGlkPSJzdmdfMV8xXyI+PHVzZSB4bGluazpocmVmPSIjc3ZnXzEiICBvdmVyZmxvdz0idmlzaWJsZSIvPjwvY2xpcFBhdGg+PGcgdHJhbnNmb3JtPSJtYXRyaXgoMSAwIDAgMSA2Ljc0MTM3MGUtMDA4IDApIiBjbGlwLXBhdGg9InVybCgjc3ZnXzFfMV8pIj48aW1hZ2Ugb3ZlcmZsb3c9InZpc2libGUiIHdpZHRoPSI2NTAiIGhlaWdodD0iODgyIiB4bGluazpocmVmPSJodHRwOi8vZGwxLmpveGkubmV0L2RyaXZlLzIwMTYvMDYvMjUvMDAxNC8xMDkxLzk1MTM2My82My8xYjlhNGZiNzIyLmpwZyIgIHRyYW5zZm9ybT0ibWF0cml4KDAuMjY2IDAgMCAwLjI2NiAxLjA0IDApIj48L2ltYWdlPjwvZz48L2c+PC9nPjwvc3ZnPg==);
}


问题:

编码base64找不到我在SVG中使用的image


注意事项

  • SVG html完美无缺
  • 尝试使用本地服务器中的图片以及托管网址
  • 尝试将svg <image>中的路径编码为base64
  • 我会接受任何提示,但是一个涉及使用svg而不编码的解决方案,但是,我更愿意尽量避免使用它。


然而,那应该是这样的:

enter image description here


谢谢! 我非常感谢您阅读和思考这个问题的时间。

1 个答案:

答案 0 :(得分:1)

如果在图像上下文中使用SVG,即通过html <img>标记或CSS背景图像,则必须在单个文件中完成,否则您将发生隐私泄露。

如果您将SVG中的图片更改为内部data URL,您会发现它可以在Chrome和Firefox中使用。如果您认为SVG作为图像的功能与光栅图像类似,那么在所有光栅图像由单个文件组成后,您就不会出错。

完成后,您就可以像现在一样将SVG文件本身转换为数据网址。