如何保持<image> xlink：href在base64編碼後工作

我使用的SVG編碼爲base64將顯示在我的.html頁面中。如何保持<image> xlink：href在base64編碼後工作

我一直在使用基本的形狀與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>

後來，已經編碼爲base64，css看起來就像這樣：

/* 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而不進行編碼的解決方案，但是，我寧願儘可能避免使用它。

然而，這就是它應該是怎樣的樣子：

謝謝！我很欣賞你在這個問題上的閱讀和思考。

來源

2016-11-13 Vladimir

如果在圖像上下文中使用SVG，即通過HTML <img>標記或作爲CSS背景圖像，則它必須在單個文件中完成，否則您有隱私泄漏。

如果您將SVG中的圖像更改爲內部data URL，您會發現它適用於Chrome和Firefox。如果您想象SVG作爲圖像的功能與光柵圖像相似，那麼在所有光柵圖像由單個文件組成之後，您不會錯誤得多。

一旦你完成了，你可以把SVG文件本身變成數據URL，就像你現在做的那樣。

來源

2016-11-13 21:06:55

如何保持<image> xlink：href在base64編碼後工作

回答

相關問題