search

GenerallyHelpfulSoftware / SVGgh

A framework for using SVG artwork in iOS Apps. Includes a UIView and a button class, printing and PDF export.
MIT License
142 stars 37 forks source link

Add blend mode support #32

Closed jconst closed 7 years ago

jconst commented 7 years ago

Found myself needing blend mode support and I didn't dare switch to the monstrosity that is SVGKit, so I took a crack at it and it was actually pretty simple.

Tested with this svg (and some others):

<?xml version="1.0" encoding="UTF-8"?>
<svg width="77px" height="100px" viewBox="0 0 77 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 41.2 (35397) - http://www.bohemiancoding.com/sketch -->
    <title>effect-pedal</title>
    <desc>Created with Sketch.</desc>
    <defs>
        <g id="knob">
            <circle id="circle" fill-opacity="0.5" fill="#FFFFFF" cx="5.51863118" cy="5.5" r="5.5"></circle>
            <path d="M10.9815832,10.9997531 C10.9937812,10.8590616 11,10.7167778 11,10.5731272 C11,7.71463151 8.53756612,5.39736291 5.5,5.39736291 C2.46243388,5.39736291 0,7.71463151 0,10.5731272 C0,10.7167778 0.00621877095,10.8590616 0.0184167876,10.9997531 C0.248946409,8.43813882 2.6150835,6.42441617 5.5,6.42441617 C8.3849165,6.42441617 10.7510536,8.43813882 10.9815832,10.9997531 Z" id="Combined-Shape" fill-opacity="0.7" fill="#000000" transform="translate(5.500000, 8.198558) scale(1, -1) translate(-5.500000, -8.198558) "></path>
            <path d="M10.9853944,5.90390988 C10.9950752,5.77053604 11,5.63584314 11,5.5 C11,2.46243388 8.53756612,0 5.5,0 C2.46243388,0 0,2.46243388 0,5.5 C0,5.63584314 0.00492479932,5.77053604 0.0146055961,5.90390988 C0.2213955,3.16237183 2.59827702,1 5.5,1 C8.40172298,1 10.7786045,3.16237183 10.9853944,5.90390988 Z" id="Combined-Shape" fill-opacity="0.6" fill="#FFFFFF"></path>
        </g>
    </defs>
    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="effect-pedal">
            <g>
                <use id="knob-1" transform="translate(9.000000, 6.000000)" style="mix-blend-mode: screen;" xlink:href="#knob">
                </use>
                <use id="knob-1" transform="translate(33.000000, 6.000000)" style="mix-blend-mode: overlay;" xlink:href="#knob">
                </use>
                <use id="knob-1" transform="translate(56.000000, 6.000000)" style="mix-blend-mode: multiply;" xlink:href="#knob">
                </use>
            </g>
        </g>
    </g>
</svg>

Rendered correctly using SVGgh (on a layer with a blue background color):

screen shot 2016-12-14 at 7 00 52 pm

Omitting the attribute leaves the normal blend mode as expected.

This approach might not work correctly for all shape types; I'll rely on your expertise to think of any of these cases if they exist.

grhowes commented 7 years ago

Really nicely integrated thank you for the new functionality.