Wkhtmltopdf SVG填充

Question

我試圖在通過拉斐爾繪製的SVG數字上添加填充，並且從wkhtmltopdf看到以下內容。有沒有人處理過這個問題？ SVG元素是否支持填充？

Answer 1

當然你也可以添加填充和其他樣式規則到你的拉斐爾創建SVG元素。它只是DOM中的另一個元素 - 不需要解決方法。 @ BigBadaboom的斷言只適用於SVG元素內部的元素，而不是SVG元素本身。

<style type="text/css"> 
    svg.padding-please 
    { 
     padding: 20px; 
     background-color: rgb(128,128,128); 
     border: 1px solid black; 
     margin: 20px; 
    } 
</style> 

當你創建你的拉斐爾紙對象：

var paper = Raphael('container', width, height); 
jQuery(paper.canvas).attr("class", "padding-please"); // `canvas` gives us direct access to the DOM node 

另類視角

你總是可以掀起一個簡單的拉斐爾擴展保證金的規定量添加到給定SVG通過操縱視圖框。例如：

Raphael.fn.addMargin = function addMargin(ratio) 
{ 
    var contentBox = { x: 100000, y: 100000, width: 0, height: 0 }; 
    this.forEach( function(element) 
        { 
         var elemBox = element.getBBox(); 
         contentBox.x = Math.min(contentBox.x, elemBox.x); 
         contentBox.y = Math.min(contentBox.y, elemBox.y); 
         contentBox.width = Math.max(contentBox.width, elemBox.width); 
         contentBox.height = Math.max(contentBox.height, elemBox.height); 
        }, this); 

    if (contentBox.x == 100000) // No elements? Whatevs 
     return; 
    var xMargin = contentBox.width * ratio; 
    var yMargin = contentBox.height * ratio; 
    this.setViewBox(contentBox.x - xMargin, contentBox.y - yMargin, contentBox.width + xMargin * 2, contentBox.height + xMargin * 2); 
} 

然後，如果你想有10％的保證金增加一個給定的SVG，你只需撥打

paper.addMargin(0.1); 

有這麼多的方法對皮膚的貓，這是驚人的家貓ISN 't絕種=）