2017-07-07 109 views
5

Tôi đang cố chuyển đổi svg thành định dạng hình ảnh. Trên thực tế rất nhiều công trình rất tốt và tôi biết làm thế nào để chuyển đổi từ SVG để vải và từ vải để img. Vấn đề của tôi là svg sử dụng css đã được bao gồm dưới dạng tệp css và bằng cách chuyển đổi thành canvas, các kiểu sẽ bị mất.Sử dụng css trong svg được chuyển đổi thành img

Có ai có ý tưởng cách sao chép kiểu vào svg hoặc canvas của tôi không?

Đây là mã của tôi: https://jsfiddle.net/DaWa/70w9db1d/

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
    <title>SVG2IMG</title> 
    <link rel="stylesheet" href="./circle.css"> 
</head> 
<body> 
<svg width="100" height="100"> 
    <circle cx="50" cy="50" r="40"/> 
</svg> 

<script> 
    var svg = document.querySelector('svg'); 

    let xml = new XMLSerializer().serializeToString(svg); 
    let data = "data:image/svg+xml;base64," + btoa(xml); 
    let img = new Image(); 
    img.src = data; 
    document.body.appendChild(img) 

</script> 

</body> 
</html> 

Và css của tôi:

circle { 
    fill:red 
} 
+0

@JGFMK Đó liên kết trang không giúp với câu hỏi của OP. –

Trả lời

3

tôi đã sử dụng thủ thuật này để thêm phong cách tính toán của mỗi nút để thuộc tính style của nó, và nó hoạt động. có thể nó có thể giúp bạn.

Cập nhật 1: một số trình duyệt không hỗ trợ thuộc tính cssText để bạn có thể sử dụng mã bên dưới có nhiều trình duyệt chéo hơn.

Cập nhật 2: Firefox tính toán tài sản trích dẫn css bao gồm một số ký tự chuỗi không hợp lệ mà btoa không thể mã hóa chính xác.

let addStyle = function(children) { 
 
    for (let i = 0; i < children.length; i++) { 
 
    let child = children[i]; 
 
    if (child instanceof Element) { 
 
     let cssText = ''; 
 
     let computedStyle = window.getComputedStyle(child, null); 
 
     for (let i = 0; i < computedStyle.length; i++) { 
 
     let prop = computedStyle[i]; 
 
     cssText += prop + ':' + computedStyle.getPropertyValue(prop) + ';'; 
 
     } 
 
     child.setAttribute('style', cssText); 
 
     addStyle(child.childNodes); 
 
    } 
 
    } 
 
} 
 

 
let svg = document.querySelector('svg'); 
 
addStyle(svg.childNodes); 
 
let xml = new XMLSerializer().serializeToString(svg); 
 
let data = "data:image/svg+xml;base64," + btoa(unescape(encodeURIComponent(xml))); 
 
let img = new Image(); 
 
img.src = data; 
 
document.body.appendChild(img);
circle { 
 
    fill: red 
 
}
<svg width="100" height="100"> 
 
    <circle cx="50" cy="50" r="40" /> 
 
</svg>

+2

Có một số vấn đề liên quan đến trình duyệt ở đây. Hình ảnh có màu đen trong trình duyệt chính của tôi (Firefox/54.0.1 trên Win64) và màu đỏ trong Chrome. (Edge treo trên "Object không hỗ trợ tài sản hoặc phương pháp 'forEach'" nhưng tôi đoán đó là một vấn đề hoàn toàn khác nhau.) Tuy nhiên cách tiếp cận tốt đẹp. –

+0

@ ÁlvaroGonzález yes computedStyle chỉ hoạt động trên bộ công cụ trên web mà tôi đoán. Tôi sẽ thêm điều này vào câu trả lời. cảm ơn vì đã nhắc nhở. –

+0

Tuy nhiên [caniuse] (http://caniuse.com/#search=getComputedStyle) cho thấy sự hỗ trợ khá rộng. Có lẽ nó không hoạt động trên SVG. –

Các vấn đề liên quan