Wkhtmltopdf SVG Padding

Question

Raphael을 통해 그려지는 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보기 상자를 조작하여. 예를 들어 : 주어진 SVG에 10 %의 마진을 추가하고자한다면 다음

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); 
} 

, 당신은 단지 피부 고양이에 이렇게 많은 방법이 있습니다

paper.addMargin(0.1); 

부를 것이다, 그것은 놀라운 고양이 속 catus의 ISN의 't extinct =)