SVG转换成的base64 [英] Convert svg into base64

问题描述

这是创建编程并没有转化为正确的base64 SVG。

在我的应用我有哪些得到相克元素的响应，然后投入创建SVG元素并将其转换成一个的base64服务，但如果我尝试打开一个链接，我发现SVG不会渲染上该页面。

  VAR的xmlns ='http://www.w3.org/2000/svg'，
    IMAGE_TEMPLATE =与Document.createElementNS号（xmlns，'SVG'）;
    IMAGE_TEMPLATE.appendChild（document.body.querySelector（'＃ICO家电调温-128'））;
    IMAGE_TEMPLATE.setAttribute（'身份证'，'SVG'）;    IMAGE_TEMPLATE.setAttributeNS（NULL，'宽'，128）;
    IMAGE_TEMPLATE.setAttributeNS（NULL，高度，128）;
    IMAGE_TEMPLATE.setAttributeNS（NULL，视框'，'0 0 128 128'）;    document.body.querySelector（'＃测试）的appendChild（IMAGE_TEMPLATE）。    测试=功能（）{
        变种S =新的XMLSerializer（）。serializeToString（的document.getElementById（SVG））
        变种EN codedData = window.btoa（S）;
        的console.log（数据：图像/ SVG + XML; BASE64，'+ EN codedData）;
    }
 

https://jsfiddle.net/6sra5c5L/

解决方案

  @ guest271314和我的答案之间的

区别：

  
  

的 @ guest271314他的回答：的

  
  

裹的G元素的SVG元素中，以确保浏览器呈现的G元素的onload。

  
  

的我的回答：的

  
  

强制里面＃TEST svg元素呈现g组件，因为g组件没有被渲染的onload。

  
  

最佳答案在这种情况下：@ guest271314

  
  

原因：A g组件应该是有效的HTML一个SVG元素中

如果要我的答案被使用？的结果
在该g组件不是HTML文档中的元素的情况。

您没有封闭测试（）与}。
低于code返回一个base64连接codeD SVG：
https://jsfiddle.net/seahorsepip/6sra5c5L/1/

编辑：

SVG渲染的问题是我之前碰到了自己，这里的带线的jQuery的修复：
https://jsfiddle.net/seahorsepip/6sra5c5L/3/

  //强制刷新SVG
$（＃测试）HTML（$（＃测试）HTML（））;
 

下面是原来那么线程对这个问题：<一href=\"http://stackoverflow.com/questions/3642035/jquerys-append-not-working-with-svg-element\">jquery's不追加使用SVG元素的工作？

我不知道jQuery的code我加的JavaScript等价的，我试着写它，但它没有工作：/

编辑2：

下面是纯JS等价的：

https://jsfiddle.net/seahorsepip/6sra5c5L/4/

  //强制刷新SVG
VAR SVG = document.body.querySelector（'＃测试）的innerHTML。
document.body.querySelector（'＃测试）的innerHTML =;
document.body.querySelector（'＃测试）的innerHTML = SVG。
 

SVG which was created programmatically does not convert into base64 correctly.

In my application I've got a service which get a response with g-element and then put into created svg-element and convert it into base64, but if I try to open a link I find that svg does not render on the page.

    var xmlns = 'http://www.w3.org/2000/svg',
    IMAGE_TEMPLATE = document.createElementNS(xmlns, 'svg');
    IMAGE_TEMPLATE.appendChild(document.body.querySelector('#ico-appliance-thermostat-128'));
    IMAGE_TEMPLATE.setAttribute('id', 'svg');

    IMAGE_TEMPLATE.setAttributeNS(null, 'width', 128);
    IMAGE_TEMPLATE.setAttributeNS(null, 'height', 128);
    IMAGE_TEMPLATE.setAttributeNS(null, 'viewBox', '0 0 128 128');

    document.body.querySelector('#test').appendChild(IMAGE_TEMPLATE);

    test = function(){
        var s = new XMLSerializer().serializeToString(document.getElementById("svg"))
        var encodedData = window.btoa(s);
        console.log('data:image/svg+xml;base64,' + encodedData);
    }

https://jsfiddle.net/6sra5c5L/

解决方案

Difference between @guest271314 and my answer:

@guest271314 his answer:

Wrap the g element inside a svg element to make sure that the browser renders the g element onload.

My answer:

Forces the svg element inside #test to render the g element since the g element wasn't rendered onload.

Best answer in this case: @guest271314

Reason: A g element should be inside a svg element in valid html.

When should my answer be used?
In the case that the g element is not an element in the html document.

You didn't close test() with a }. Code below returns a base64 encoded svg: https://jsfiddle.net/seahorsepip/6sra5c5L/1/

Edit:

svg render issue is something I ran into myself before, here's the fix with a line of jquery: https://jsfiddle.net/seahorsepip/6sra5c5L/3/

//Force refresh svg
$("#test").html($("#test").html());

Here's the original SO thread about the issue: jquery's append not working with svg element?

I don't know the javascript equivalent for the jQuery code I added, I tried to write it but it didn't work :/

Edit 2:

Here's the pure js equivalent:

https://jsfiddle.net/seahorsepip/6sra5c5L/4/

//Force refresh svg
var svg = document.body.querySelector('#test').innerHTML;
document.body.querySelector('#test').innerHTML = "";
document.body.querySelector('#test').innerHTML = svg;

这篇关于SVG转换成的base64的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！