search

mapbox / spritezero

small opinionated sprites
Other
173 stars 62 forks source link

background of svg lost while concat to png #54

Closed huangyingjie closed 4 years ago

huangyingjie commented 7 years ago

background,blur and circle of svg lost while concated to png.

svg

image

<?xml version="1.0" encoding="UTF-8"?>
<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 45.1 (43504) - http://www.bohemiancoding.com/sketch -->
    <title>建筑</title>
    <desc>Created with Sketch.</desc>
    <defs>
        <circle id="path-1" cx="8" cy="8" r="8"></circle>
        <filter x="-12.5%" y="-6.2%" width="125.0%" height="125.0%" filterUnits="objectBoundingBox" id="filter-2">
            <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
            <feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.2 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
        </filter>
        <path d="M8.1802315,5.77885759 L9.1802315,5.57885759 L9.1802315,5.57885759 C10.263351,5.36223369 11.3170012,6.06466717 11.5336251,7.14778667 C11.5594544,7.27693304 11.5724638,7.40831497 11.5724638,7.54001894 L11.5724638,12.1004111 L6.57246377,12.1004111 L6.57246377,7.74001894 L6.57246377,7.74001894 C6.57246377,6.7866569 7.2453831,5.96582727 8.1802315,5.77885759 Z" id="path-3"></path>
        <path d="M2.78462517,1.5807438 L5.78462517,0.295029516 L5.78462517,0.295029516 C6.79988474,-0.140081726 7.97564259,0.330221413 8.41075383,1.34548098 C8.51744827,1.59443468 8.57246377,1.86246602 8.57246377,2.13331958 L8.57246377,12.1002415 L1.57246377,12.1002415 L1.57246377,3.41903386 L1.57246377,3.41903386 C1.57246377,2.61897764 2.04925748,1.89590139 2.78462517,1.5807438 Z" id="path-4"></path>
    </defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="最终方案展示" transform="translate(-444.000000, -607.000000)">
            <g id="16px" transform="translate(445.000000, 606.000000)">
                <g id="建筑" transform="translate(0.000000, 1.000000)">
                    <g id="Oval-6">
                        <use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
                        <use fill="#FFFFFF" fill-rule="evenodd" xlink:href="#path-1"></use>
                    </g>
                    <g id="Group" transform="translate(1.427536, 0.899758)">
                        <g id="Rectangle-5-Copy" transform="translate(9.072464, 8.600242) scale(-1, 1) translate(-9.072464, -8.600242) ">
                            <use fill="#FFC858" fill-rule="evenodd" xlink:href="#path-3"></use>
                            <path stroke="#986100" stroke-width="1" d="M7.07246377,11.6004111 L11.0724638,11.6004111 L11.0724638,7.54001894 C11.0724638,7.44124096 11.0627067,7.34270452 11.0433348,7.24584474 C10.8808669,6.43350511 10.0906292,5.90668 9.27828957,6.06914793 L8.27828957,6.26914793 C7.57715327,6.40937519 7.07246377,7.02499741 7.07246377,7.74001894 L7.07246377,11.6004111 Z"></path>
                        </g>
                        <path d="M1.07246377,11.1002143 L12.0724638,11.1002143 L12.0724638,11.1002143 C12.3486061,11.1002143 12.5724638,11.3240719 12.5724638,11.6002143 L12.5724638,11.6002143 L12.5724638,11.6002143 C12.5724638,11.8763566 12.3486061,12.1002143 12.0724638,12.1002143 L1.07246377,12.1002143 L1.07246377,12.1002143 C0.796321393,12.1002143 0.572463768,11.8763566 0.572463768,11.6002143 L0.572463768,11.6002143 L0.572463768,11.6002143 C0.572463768,11.3240719 0.796321393,11.1002143 1.07246377,11.1002143 Z" id="Rectangle-6" fill="#986100"></path>
                        <g id="Rectangle-5">
                            <use fill="#FFC858" fill-rule="evenodd" xlink:href="#path-4"></use>
                            <path stroke="#986100" stroke-width="1" d="M2.07246377,11.6002415 L8.07246377,11.6002415 L8.07246377,2.13331958 C8.07246377,1.93017941 8.03120214,1.7291559 7.95118131,1.54244063 C7.62484788,0.780995954 6.74302949,0.428268599 5.98158482,0.754602031 L2.98158482,2.04031632 C2.43005905,2.2766845 2.07246377,2.8189917 2.07246377,3.41903386 L2.07246377,11.6002415 Z"></path>
                        </g>
                        <path d="M4.07246377,4.10021426 L6.07246377,4.10021426 L6.07246377,4.10021426 C6.34860614,4.10021426 6.57246377,4.32407189 6.57246377,4.60021426 L6.57246377,4.60021426 L6.57246377,4.60021426 C6.57246377,4.87635664 6.34860614,5.10021426 6.07246377,5.10021426 L4.07246377,5.10021426 L4.07246377,5.10021426 C3.79632139,5.10021426 3.57246377,4.87635664 3.57246377,4.60021426 L3.57246377,4.60021426 L3.57246377,4.60021426 C3.57246377,4.32407189 3.79632139,4.10021426 4.07246377,4.10021426 Z" id="Rectangle-7" fill="#986100"></path>
                        <path d="M4.07246377,6.10021426 L6.07246377,6.10021426 L6.07246377,6.10021426 C6.34860614,6.10021426 6.57246377,6.32407189 6.57246377,6.60021426 L6.57246377,6.60021426 L6.57246377,6.60021426 C6.57246377,6.87635664 6.34860614,7.10021426 6.07246377,7.10021426 L4.07246377,7.10021426 L4.07246377,7.10021426 C3.79632139,7.10021426 3.57246377,6.87635664 3.57246377,6.60021426 L3.57246377,6.60021426 L3.57246377,6.60021426 C3.57246377,6.32407189 3.79632139,6.10021426 4.07246377,6.10021426 Z" id="Rectangle-7-Copy" fill="#986100"></path>
                        <path d="M4.07246377,8.10021426 L6.07246377,8.10021426 L6.07246377,8.10021426 C6.34860614,8.10021426 6.57246377,8.32407189 6.57246377,8.60021426 L6.57246377,8.60021426 L6.57246377,8.60021426 C6.57246377,8.87635664 6.34860614,9.10021426 6.07246377,9.10021426 L4.07246377,9.10021426 L4.07246377,9.10021426 C3.79632139,9.10021426 3.57246377,8.87635664 3.57246377,8.60021426 L3.57246377,8.60021426 L3.57246377,8.60021426 C3.57246377,8.32407189 3.79632139,8.10021426 4.07246377,8.10021426 Z" id="Rectangle-7-Copy-2" fill="#986100"></path>
                    </g>
                </g>
            </g>
        </g>
    </g>
</svg>

png

image

springmeyer commented 4 years ago

This is fixed in the latest version of mapnik used in spritezero. Here is a test:

node -e "m=require('mapnik');fs=require('fs');m.Image.fromSVGBytesSync(fs.readFileSync('issue_54.svg'),{scale:5}).save('out.png')"

Which outputs:

out