Jump to content


Check out our Community Blogs

Register and join over 40,000 other developers!


Recent Status Updates

View All Updates

Photo
- - - - -

Svg feblender example in w3schools

html5

  • Please log in to reply
1 reply to this topic

#1 deepakramasundaram

deepakramasundaram

    CC Lurker

  • Just Joined
  • Pip
  • 2 posts
  • Programming Language:C, Java, PHP, JavaScript, Visual Basic .NET
  • Learning:PHP

Posted 24 September 2012 - 05:15 AM

Respected sir,
I am not able to understand the output of this code as
the output just displays the svg tags code and no text is displayed
as the text tag is used.It should display all the modes name
in this example and none is displayed.please clarify me the text
is not displayed.
Thanks,
R.DEEPAK

/* code for the example of feblender*/
<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<linearGradient id="MyGradient" gradientUnits="userSpaceOnUse" x1="100" y1="0" x2="300" y2="0">
<stop offset="0" style="stop-color:#000000" />
<stop offset=".33" style="stop-color:#ffffff" />
<stop offset=".67" style="stop-color:#ffff00" />
<stop offset="1" style="stop-color:#808080" />
</linearGradient>
<filter id="normal">
<feBlend mode="normal" in2="BackgroundImage" in="SourceGraphic" />
</filter>
<filter id="multiply">
<feBlend mode="multiply" in2="BackgroundImage" in="SourceGraphic" />
</filter>
<filter id="screen">
<feBlend mode="screen" in2="BackgroundImage" in="SourceGraphic" />
</filter>
<filter id="darken">
<feBlend mode="darken" in2="BackgroundImage" in="SourceGraphic" />
</filter>
<filter id="lighten">
<feBlend mode="lighten" in2="BackgroundImage" in="SourceGraphic" />
</filter>
</defs>
<g style="enable-background:new">
<rect x="40" y="20" width="300" height="450" style="fill:url(#MyGradient)" />
<g style="font-size:75;fill:#666666;fill-opacity:.6">
<text x="50" y="90" filter="url(#normal)">Normal</text>
<text x="50" y="180" filter="url(#multiply)">Multiply</text>
<text x="50" y="270" filter="url(#screen)">Screen</text>
<text x="50" y="360" filter="url(#darken)">Darken</text>
<text x="50" y="450" filter="url(#lighten)">Lighten</text>
</g>
</g>
</svg>

</body>
</html>

Attached Files


  • 0

#2 wim DC

wim DC

    Roar

  • Expert Member
  • PipPipPipPipPipPipPipPip
  • 2681 posts
  • Programming Language:Java, JavaScript, PL/SQL
  • Learning:Python

Posted 24 September 2012 - 05:37 AM

Note to other users: He means this example-http://www.w3schools...=trysvg_feblend-don't bother downloading the attachment.
  • 0





Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download