search

shakyShane / gulp-svg-sprites

Create SVG sprites or compile to <symbols>
MIT License
334 stars 45 forks source link

Gradient is broken because svg-sprite-data replaces ids #48

Closed roadhump closed 10 years ago

roadhump commented 10 years ago

I can't say is anything wrong with svg-sprite-data https://github.com/shakyShane/svg-sprite-data , so I post it here

Before 

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="21px" height="17px" viewBox="0 0 21 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
    <!-- Generator: Sketch Beta 3.0.4 (7942) - http://www.bohemiancoding.com/sketch -->
    <title>Team Icon</title>
    <desc>Created with Sketch Beta.</desc>
    <defs>
        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
            <stop stop-color="#4C4C4C" offset="0%"></stop>
            <stop stop-color="#7F7F7F" offset="100%"></stop>
        </linearGradient>
    </defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
        <g id="Team-Icon" sketch:type="MSLayerGroup" fill="url(#linearGradient-1)">
            <path d="M12.8967807,7.87764369 C13.8978694,7.08861613 14.5479327,5.78518845 14.5479327,4.35193263 C14.5479327,1.95771469 12.7355755,0 10.4998908,0 C8.26420609,0 6.4518489,1.93268477 6.4518489,4.3269027 C6.4518489,5.76015852 7.10191218,7.09282677 8.10300088,7.88185433 C5.81270738,8.87650159 4.2,11.3858104 4.2,14.1929052 C4.2,17.9356983 16.8,17.9356983 16.8,14.1929052 C16.7995631,11.3860443 15.1870742,8.87252487 12.8967807,7.87764369 Z M18.0539732,7.30351383 C18.8097097,6.7404596 19.3001535,5.82308324 19.3001535,4.79986449 C19.3001535,3.09071441 17.9322032,1.7 16.2446906,1.7 C15.8657011,1.7 15.5030822,1.77041017 15.1682707,1.89782986 C15.4077741,2.47065066 15.5405326,3.10002672 15.5405326,3.76051954 C15.5405326,4.97884259 15.0805873,6.14719714 14.28,7.02550722 C16.4752239,8.26858741 17.8525929,10.6348234 17.8525929,13.2724791 C17.8525929,13.3765045 17.8442955,13.4864352 17.8254582,13.6 C19.5735193,13.377413 21,12.7725669 21,11.7852347 C21,9.66089172 19.7827484,8.01374802 18.0539732,7.30351383 Z M3.26499724,13.2480135 C3.26499724,10.6639837 4.55795098,8.34173396 6.62728778,7.0847364 C6.65891901,7.05459203 6.68967765,7.02331441 6.72,6.9920368 C5.95386983,6.11649017 5.51386853,4.9558186 5.51386853,3.74301767 C5.51386853,3.11746534 5.63188573,2.52024417 5.84414218,1.97243258 C5.47220256,1.79791254 5.06012401,1.7 4.62579451,1.7 C2.98424282,1.7 1.65354975,3.08006819 1.65354975,4.78560491 C1.65354975,5.80688709 2.13085408,6.73116334 2.86578932,7.2930272 C1.18431683,8.00175987 0,9.6440614 0,11.7639132 C0,12.7888218 1.501938,13.4007752 3.29531959,13.6 C3.27415939,13.4776093 3.26499724,13.3597516 3.26499724,13.2480135 Z" sketch:type="MSShapeGroup"></path>
        </g>
    </g>
</svg>

After 

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="21" height="17" viewBox="0 0 21 17"><svg width="21" height="17" viewBox="0 0 21 17" id="team" y="0"><title>Team Icon</title><desc>Created with Sketch Beta.</desc><defs><linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="aaa-hey-yo"><stop stop-color="#4C4C4C" offset="0%"/><stop stop-color="#7F7F7F" offset="100%"/></linearGradient></defs><path d="M12.897 7.878c1-.79 1.65-2.093 1.65-3.526C14.548 1.958 12.738 0 10.5 0 8.264 0 6.452 1.933 6.452 4.327c0 1.433.65 2.766 1.65 3.555-2.29.995-3.902 3.504-3.902 6.31 0 3.744 12.6 3.744 12.6 0 0-2.806-1.613-5.32-3.903-6.314zm5.157-.574C18.81 6.74 19.3 5.824 19.3 4.8c0-1.71-1.368-3.1-3.055-3.1-.38 0-.742.07-1.077.198.24.573.373 1.202.373 1.863 0 1.22-.46 2.387-1.26 3.266 2.195 1.243 3.573 3.61 3.573 6.246 0 .105-.01.214-.028.328 1.75-.223 3.175-.827 3.175-1.815 0-2.124-1.217-3.77-2.946-4.48zm-14.79 5.944c0-2.584 1.294-4.906 3.363-6.163.032-.03.063-.062.093-.093-.766-.876-1.206-2.036-1.206-3.25 0-.625.118-1.222.33-1.77-.372-.174-.784-.272-1.218-.272-1.642 0-2.972 1.38-2.972 3.086 0 1.02.477 1.945 1.212 2.507C1.184 8.003 0 9.643 0 11.763c0 1.026 1.502 1.638 3.295 1.837-.02-.122-.03-.24-.03-.352z" fill="url(#aaa)"/></svg>
</svg>

ID of <linearGradient> is aaa-hey-yo and <path>'s attribute is fill="url(#aaa)", but they must be the same.

salzhrani commented 10 years ago

+1

christianhaller commented 10 years ago

+1

leandropetreca commented 10 years ago

+1

leandropetreca commented 10 years ago

on svg-sprite-data -> lib -> svg-obj.js 

this.svg.find('//*[@id]').forEach(function(elem) {
        var id              = elem.attr('id').value(),
        substId             = ns + id;
        subst['#' + id]     = substId;
        //elem.attr('id', substId + "-hey-yo");
        elem.attr('id', substId );
    });

I made this change and it is working for me.

shakyShane commented 10 years ago

@leandropetreca - thanks, you tracked down something that should've never been published. it's fixed now in version 1.0.3 of this plugin.

npm install gulp-svg-sprites@latest --save-dev