?
Solved

3D effects in SVG

Posted on 2001-07-09
3
Medium Priority
?
297 Views
Last Modified: 2008-02-01
I have the following SVG code that generates pie chart.
I need to add some 3D effect on it - even just shadow or something like this.
It is urgent.

<?xml version="1.0" standalone="yes"?>
<svg width="800" height="600">
<g id="series">
<path id="1" d="M 320 112.5 A 162.5 162.5 0 1 1 199.238938 383.733788 L 320 275 Z" style="fill:tomato"/>
<path id="2" d="M 199.238938 383.733788 A 162.5 162.5 0 0 1 168.29325 333.2348 L 320 275 Z" style="fill:magenta"/>
<path id="3" d="M 168.29325 333.2348 A 162.5 162.5 0 0 1 183.715962 186.496162 L 320 275 Z" style="fill:brown"/>
<path id="4" d="M 183.715962 186.496162 A 162.5 162.5 0 0 1 195.51785 170.54695 L 320 275 Z" style="fill:blue"/>
<path id="5" d="M 195.51785 170.54695 A 162.5 162.5 0 0 1 277.941913 118.037025 L 320 275 Z" style="fill:green"/>
<path id="6" d="M 277.941913 118.037025 A 162.5 162.5 0 0 1 320 112.5 L 320 275 Z" style="fill:indigo"/>
</g>
</svg>

Thanks.
0
Comment
Question by:pavlin
3 Comments
 
LVL 2

Accepted Solution

by:
djokov earned 800 total points
ID: 6266008
<?xml version="1.0" standalone="yes"?>
<svg width="800" height="600">
<filter id="DropShadowFilter" filterUnits="objectBoundingBox" x="-10%" y="-10%" width="120%" height="120%">
   <feGaussianBlur in="SourceAlpha" stdDeviation="2" result="BlurAlpha"/>
   <feOffset in="BlurAlpha" dx="4" dy="4" result="OffsetBlurAlpha"/>
   <feMerge>
      <feMergeNode in="OffsetBlurAlpha"/>
      <feMergeNode in="SourceGraphic"/>
   </feMerge>
</filter>
<g id="series" style="filter:url(#DropShadowFilter)" transform="scale(1 0.5)">
<path id="1" d="M 320 112.5 A 162.5 162.5 0 1 1 199.238938 383.733788 L 320 275 Z" style="fill:tomato"/>
<path id="2" d="M 199.238938 383.733788 A 162.5 162.5 0 0 1 168.29325 333.2348 L 320 275 Z" style="fill:magenta"/>
<path id="3" d="M 168.29325 333.2348 A 162.5 162.5 0 0 1 183.715962 186.496162 L 320 275 Z" style="fill:brown"/>
<path id="4" d="M 183.715962 186.496162 A 162.5 162.5 0 0 1 195.51785 170.54695 L 320 275 Z" style="fill:blue"/>
<path id="5" d="M 195.51785 170.54695 A 162.5 162.5 0 0 1 277.941913 118.037025 L 320 275 Z" style="fill:green"/>
<path id="6" d="M 277.941913 118.037025 A 162.5 162.5 0 0 1 320 112.5 L 320 275 Z" style="fill:indigo"/>
</g>
</svg>

Will help.
0
 

Author Comment

by:pavlin
ID: 6266039
Yes! Thanx friend..
0
 

Expert Comment

by:frankg77777
ID: 14886872
pavlin, djokov-
how did you create the vectors for the pie pieces?  can you do it on the fly via transformations or scripting?
i have been unable to even create separate shapes in Illustrator.
thanks
frankg77777
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

The Problem How to write an Xquery that works like a SQL outer join, providing placeholders for absent data on the outer side?  I give a bit more background at the end. The situation expressed as relational data Let’s work through this.  I’ve …
The Client Need Led Us to RSS I recently had an investment company ask me how they might notify their constituents about their newsworthy publications.  Probably you would think "Facebook" or "Twitter" but this is an interesting client.  Their cons…
This video shows how to quickly and easily deploy an email signature for all users in Office 365 and prevent it from being added to replies and forwards. (the resulting signature is applied on the server level in Exchange Online) The email signat…
Please read the paragraph below before following the instructions in the video — there are important caveats in the paragraph that I did not mention in the video. If your PaperPort 12 or PaperPort 14 is failing to start, or crashing, or hanging, …
Suggested Courses
Course of the Month14 days, 19 hours left to enroll

839 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question