Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix SVG for new text shadows #2827

Merged
merged 5 commits into from Mar 11, 2016
Merged

Fix SVG for new text shadows #2827

merged 5 commits into from Mar 11, 2016

Conversation

asturur
Copy link
Member

@asturur asturur commented Mar 11, 2016

Move the shadow filter of text to its outer group instead of text element.

closes #2807

Canvas
image

exported svg:
image

<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="700" height="600" viewBox="0 0 700 600" xml:space="preserve">
<desc>Created with Fabric.js 1.6.0-rc.1</desc>
<defs></defs>
<filter id="SVGID_2" y="-28%" height="156%" x="-29%" width="158%" >
    <feGaussianBlur in="SourceAlpha" stdDeviation="5"></feGaussianBlur>
    <feOffset dx="10" dy="10" result="oBlur" ></feOffset>
    <feFlood flood-color="rgba(0,0,0,0.3)"/>
    <feComposite in2="oBlur" operator="in" />
    <feMerge>
        <feMergeNode></feMergeNode>
        <feMergeNode in="SourceGraphic"></feMergeNode>
    </feMerge>
</filter>
    <g transform="translate(193.52 300.47)" style="filter: url(#SVGID_2);">
        <rect fill="#9ce77c" x="-115.02" y="-117.97" width="230.05" height="67.8"></rect>
        <rect fill="yellow" x="8.33" y="-117.97" width="8.89" height="67.8"></rect>
        <rect fill="yellow" x="17.21" y="-117.97" width="22.25" height="67.8"></rect>
        <rect fill="yellow" x="39.46" y="-117.97" width="20" height="67.8"></rect>
        <rect fill="yellow" x="59.46" y="-117.97" width="22.25" height="67.8"></rect>
        <rect fill="#9ce77c" x="-115.02" y="-39.32" width="88.95" height="45.2"></rect>
        <rect fill="#9ce77c" x="-115.02" y="13.11" width="153.81" height="45.2"></rect>
        <rect fill="#9ce77c" x="-115.02" y="65.54" width="200.47" height="45.2"></rect>
        <text font-family="Helvetica" font-size="40" font-weight="normal" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: #333; fill-rule: nonzero; opacity: 1;" >
            <tspan x="-115.02" y="-65.17" font-family="Helvetica" font-size="20" font-weight="normal" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; fill: red; fill-rule: ; opacity: 1;">l</tspan>
            <tspan x="-110.58" y="-65.17" font-family="Helvetica" font-size="30" font-weight="normal" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; fill: red; fill-rule: ; opacity: 1;">o</tspan>
            <tspan x="-93.9" y="-65.17" font-family="Helvetica" font-size="40" font-weight="normal" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; fill: red; fill-rule: ; opacity: 1;">r</tspan>
            <tspan x="-80.58" y="-65.17" font-family="Helvetica" font-size="50" font-weight="normal" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; fill: red; fill-rule: ; opacity: 1;">e</tspan>
            <tspan x="-52.77" y="-65.17" font-family="Helvetica" font-size="60" font-weight="normal" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; fill: red; fill-rule: ; opacity: 1;">m</tspan>
            <tspan x="-2.79" y="-65.17" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; fill: #333; fill-rule: ; opacity: 1;"> </tspan>
            <tspan x="8.33" y="-65.17" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; fill: #333; fill-rule: ; opacity: 1;">i</tspan>
            <tspan x="17.21" y="-65.17" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; fill: #333; fill-rule: ; opacity: 1;">p</tspan>
            <tspan x="39.46" y="-65.17" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; fill: #333; fill-rule: ; opacity: 1;">s</tspan>
            <tspan x="59.46" y="-65.17" font-family="Helvetica" font-size="40" font-weight="normal" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; fill: #333; fill-rule: ; opacity: 1;">u</tspan>
            <tspan x="81.7" y="-65.17" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; fill: #333; fill-rule: ; opacity: 1;">m</tspan>
            <tspan x="-115.02" y="-4.12" text-decoration="underline" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; fill: #333; fill-rule: ; opacity: 1;">d</tspan>
            <tspan x="-92.78" y="-4.12" font-family="Helvetica" font-size="40" font-weight="normal" text-decoration="underline" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; fill: #333; fill-rule: ; opacity: 1;">o</tspan>
            <tspan x="-70.53" y="-4.12" font-style="italic" text-decoration="underline" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; fill: green; fill-rule: ; opacity: 1;">l</tspan>
            <tspan x="-61.65" y="-4.12" font-style="italic" text-decoration="underline" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; fill: green; fill-rule: ; opacity: 1;">o</tspan>
            <tspan x="-39.4" y="-4.12" font-family="Helvetica" font-size="40" font-style="italic" font-weight="normal" text-decoration="underline" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; fill: green; fill-rule: ; opacity: 1;">r</tspan>
            <tspan x="-115.02" y="48.31" font-weight="bold" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; fill: blue; fill-rule: ; opacity: 1;">s</tspan>
            <tspan x="-92.78" y="48.31" font-weight="bold" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; fill: blue; fill-rule: ; opacity: 1;">i</tspan>
            <tspan x="-81.67" y="48.31" font-family="Helvetica" font-size="40" font-weight="bold" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; fill: blue; fill-rule: ; opacity: 1;">t</tspan>
            <tspan x="-68.34" y="48.31" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; fill: #333; fill-rule: ; opacity: 1;"> </tspan>
            <tspan x="-57.23" y="48.31" font-family="Courier" text-decoration="line-through" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; fill: #333; fill-rule: ; opacity: 1;">A</tspan>
            <tspan x="-33.23" y="48.31" font-family="Courier" text-decoration="line-through" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; fill: #333; fill-rule: ; opacity: 1;">m</tspan>
            <tspan x="-9.22" y="48.31" font-family="Courier" text-decoration="line-through" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; fill: #333; fill-rule: ; opacity: 1;">e</tspan>
            <tspan x="14.78" y="48.31" font-family="Courier" font-size="40" font-weight="normal" text-decoration="line-through" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; fill: #333; fill-rule: ; opacity: 1;">t</tspan>
            <tspan x="-115.02" y="100.74" font-family="Impact" text-decoration="line-through" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; fill: #666; fill-rule: ; opacity: 1;">c</tspan>
            <tspan x="-95.24" y="100.74" font-family="Impact" text-decoration="line-through" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; fill: #666; fill-rule: ; opacity: 1;">o</tspan>
            <tspan x="-74.79" y="100.74" font-family="Impact" text-decoration="line-through" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; fill: #666; fill-rule: ; opacity: 1;">n</tspan>
            <tspan x="-53.87" y="100.74" font-family="Impact" text-decoration="line-through" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; fill: #666; fill-rule: ; opacity: 1;">s</tspan>
            <tspan x="-35.04" y="100.74" font-family="Impact" font-size="40" font-weight="normal" text-decoration="line-through" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; fill: #666; fill-rule: ; opacity: 1;">e</tspan>
            <tspan x="-14.59" y="100.74" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; fill: #333; fill-rule: ; opacity: 1;">c</tspan>
            <tspan x="5.41" y="100.74" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; fill: #333; fill-rule: ; opacity: 1;">t</tspan>
            <tspan x="16.52" y="100.74" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; fill: #333; fill-rule: ; opacity: 1;">e</tspan>
            <tspan x="38.76" y="100.74" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; fill: #333; fill-rule: ; opacity: 1;">t</tspan>
            <tspan x="49.88" y="100.74" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; fill: #333; fill-rule: ; opacity: 1;">u</tspan>
            <tspan x="72.12" y="100.74" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; fill: #333; fill-rule: ; opacity: 1;">r</tspan>
        </text>
    </g>
<filter id="SVGID_1" y="-33%" height="166%" x="-36%" width="172%" >
    <feGaussianBlur in="SourceAlpha" stdDeviation="5"></feGaussianBlur>
    <feOffset dx="10" dy="10" result="oBlur" ></feOffset>
    <feFlood flood-color="rgba(0,0,0,0.3)"/>
    <feComposite in2="oBlur" operator="in" />
    <feMerge>
        <feMergeNode></feMergeNode>
        <feMergeNode in="SourceGraphic"></feMergeNode>
    </feMerge>
</filter>
    <g transform="translate(474.77 269.15)" style="filter: url(#SVGID_1);">
        <text font-family="Helvetica" font-size="40" font-weight="normal" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: #333; fill-rule: nonzero; opacity: 1;" >
            <tspan x="-62.27" y="-43.45" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; fill: red; fill-rule: ; opacity: 1;">f</tspan>
            <tspan x="-51.15" y="-43.45" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; fill: red; fill-rule: ; opacity: 1;">o</tspan>
            <tspan x="-28.91" y="-43.45" font-family="Helvetica" font-size="40" font-weight="normal" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; fill: red; fill-rule: ; opacity: 1;">o</tspan>
            <tspan x="-6.66" y="-43.45" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; fill: #333; fill-rule: ; opacity: 1;"> </tspan>
            <tspan x="4.45" y="-43.45" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; fill: #333; fill-rule: ; opacity: 1;">b</tspan>
            <tspan x="26.7" y="-43.45" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; fill: #333; fill-rule: ; opacity: 1;">a</tspan>
            <tspan x="48.95" y="-43.45" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; fill: #333; fill-rule: ; opacity: 1;">r</tspan>
            <tspan x="-62.27" y="8.98" fill="#333">baz</tspan>
            <tspan x="-62.27" y="61.42" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; fill: blue; fill-rule: ; opacity: 1;">q</tspan>
            <tspan x="-40.02" y="61.42" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; fill: blue; fill-rule: ; opacity: 1;">u</tspan>
            <tspan x="-17.77" y="61.42" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; fill: blue; fill-rule: ; opacity: 1;">u</tspan>
            <tspan x="4.47" y="61.42" font-family="Helvetica" font-size="40" font-weight="normal" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; fill: blue; fill-rule: ; opacity: 1;">x</tspan>
        </text>
    </g>
<filter id="SVGID_3" y="-38%" height="176%" x="-24%" width="148%" >
    <feGaussianBlur in="SourceAlpha" stdDeviation="5"></feGaussianBlur>
    <feOffset dx="11.29" dy="8.51" result="oBlur" ></feOffset>
    <feFlood flood-color="rgba(0,0,0,0.3)"/>
    <feComposite in2="oBlur" operator="in" />
    <feMerge>
        <feMergeNode></feMergeNode>
        <feMergeNode in="SourceGraphic"></feMergeNode>
    </feMerge>
</filter>
    <g transform="translate(488.74 450.41) rotate(8) scale(0.5 0.5)" style="filter: url(#SVGID_3);">
        <rect fill="#eabb64" x="-246.76" y="-52.43" width="493.52" height="104.86"></rect>
        <text font-family="helvetica" font-size="40" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: #bf926c; fill-rule: nonzero; opacity: 1;" >
            <tspan x="-246.76" y="-17.23" fill="#bf926c">Lorem ipsum dolor sit amet,</tspan>
            <tspan x="-246.76" y="35.2" fill="#bf926c">consectetur adipisicing elit</tspan>
        </text>
    </g>
</svg>

asturur added a commit that referenced this pull request Mar 11, 2016
@asturur asturur merged commit 16f358c into fabricjs:master Mar 11, 2016
@asturur asturur deleted the newtextshadow branch March 26, 2016 11:37
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Text shadow multi level casting
1 participant