ASPX + gradient SVG not working on Visual Studio 2010
Question
I've recently encountered a problem designing a web page. I needed to have rounded corners and gradient background. For IE6-8, Firefox and Chrome I've solved it using CSS3Pie . As Pie doesn't work on IE 9 I came up with SVG gradients . As I tested on my local machine there was no problem. Everything ok. But when I pasted on my VS2010 Proyect nothing happened, as the .svg wasn't found. Never reached? or VS2010 problem?. Here is my code:
default.aspx
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>Sample</title>
<style type="text/css" media="screen">
.svgWorkPlease
{
border-radius: 100px;
box-shadow: 0px 2px 4px #999;
margin:20px;
height:500px;
width:500px;
background-repeat: repeat-x;
background-position-x: 0px;
background-position-y: 100%;
filter:none;
background-image: url(gradients.svg);
background-size: 100% 200%;
}
</style>
</head>
<body>
<div class="svgWorkPlease">Hmmmmm....</div>
</body>
</html>
gradients.svg
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100" height="200" version="1.1" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</linearGradient>
<linearGradient id="grad2" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(0,255,255);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
</linearGradient>
</defs>
<rect x="0" y="0" width="100" height="100" style="fill:url(#grad1)" />
<rect x="0" y="100" width="100" height="100" style="fill:url(#grad2)" />
</svg>
Thanks in advance!
1 answers
solution1
0 ACCPTED 2012-06-13 19:02:12
I think I might be a little late to this game, but if you're still having this issue, then I may have a solution for you:
Cassini (the ASP.Net Development Server) can't serve SVG. The solution that worked for me (and consequently for my entire development team) was to get IIS running and configure the project to run using IIS as the server environment. (Another solution is to just use inline SVG data within the page content, but I don't recommend that; I find it messy.)
That was the solution that was presented to me by various threads here on SO and one or two webpages here and there, the links to all of which I forgot to archive. Unfortunately, I also ran into authentication problems, and had to research a separate solution to that as well. Here's my compiled list of instructions that I sent out to my dev team (compacted a bit, with less detail, so as not to become a book):
Note: most of the following steps require either an administrative account on your local machine, or an Active Directory administrator account if you're on an AD domain (or ask the domain admin to give you local admin privileges — that's what I did).
Enable IIS and Windows Authentication
Note: if this doesn't work for you, then you may need to install IIS from scratch.
- Go to Start > Control Panel > Programs and Features > Turn Windows Features on and Off
- In the feature list, check the box next to Internet Information Services, then expand the tree and navigate to Internet Information Services > World Wide Web Services > Security and check the box next to Windows Authentication. Click OK.
Configure IIS
- Open the Start menu and enter "IIS" in the search box. Press Enter/Return to open it.
- Add a new site, making sure to use the correct application pool (my app was MVC, relying on .NET 4.0) and point the directory to the local directory where you store your copy of the project (I keep mine in C:\\Projects\\). Make sure you're pointing to the root folder of the web application, not the root folder of the project (the correct folder will directly contain your Models/Views/Controllers folders if you're using MVC). Give the site a port number (just make something up, something memorable, but don't use "80" if you plan on testing multiple projects on this machine at the same time). Click OK.
- In the configuration pane for the main server at the top of the tree, select MIME types and make sure that there is an entry in the list that looks like ".svg" | "image/svg+xml" — add it yourself if it's not there.
- In the configuration pane for your new website, select Authentication. Disable all forms of authentication except for "Windows Authentication" — enable that one.
Note: if the ASP.NET v4.0 application pool is not in the list in step 2, follow these contingency steps:
Application Pool Contingency
Note: these steps are only for use in case ASP.NET v4.0 is not an option when selecting an Application Pool in IIS Manager.
- Open a command terminal.
- Type
cd C:\\Windows\\Microsoft.NET\\Framework64(the Framework64 folder name may be different, so you may need to just look around theC:\\Windows\\Microsoft.NETdirectory to find it). Press Enter/Return. - Type
dirto list the contents of this folder. Look for a folder name likev4.0.30319andcdinto it. - Type
aspnet_regiis -ir. Press Enter/Return. - Once it does its thing, close the terminal window and close/reopen IIS Manager, then go enable "Windows Authentication" again.
Now, to preview your website, configure the VS2010 project to point to http://localhost:<port> where <port> is the port number you entered in step 2 of Configure IIS . You also need to configure the project for Windows Authentication as well.
Please note that these instructions have only been personally tested on Windows 7 Enterprise edition with IIS 7.5. Even if your environment is identical to mine, your application may not be, and therefore you will likely need to modify a few of my steps.
I hope I've been helpful and not redundant here. I thought I might just compile all the steps together in one place, rather than just hand you a bunch of links and say "good luck." If you (or anyone) would prefer further detail on the steps above, I can be more explicit; I'm just assuming a certain level of familiarity with Windows, IIS, and Visual Studio.
If I find the links I mentioned above, I will edit this post and include them.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.