ASPX +渐变 SVG 不适用于 Visual Studio 2010
我最近在设计网页时遇到了一个问题。我需要有圆角和渐变背景。对于 IE6-8、Firefox 和 Chrome，我已经使用 CSS3Pie 解决了这个问题。由于 Pie 无法在 IE 9 上运行，我想出了 SVG 渐变。我在本地机器上测试时没有问题。一切都好。但是当我粘贴到我的 VS2010 Proyect 上时，什么也没发生，因为没有找到 .svg。从未达到？还是VS2010的问题？这是我的代码：
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>
提前致谢！
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!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我想我可能有点晚了，但如果您仍然遇到这个问题，那么我可能有一个解决方案给您：
Cassini（ASP.Net 开发服务器）无法提供 SVG。对我（以及我的整个开发团队）有效的解决方案是运行 IIS 并将项目配置为使用 IIS 作为服务器环境来运行。 （另一种解决方案是在页面内容中使用内联 SVG 数据，但我不建议这样做；我发现它很混乱。）
这是 SO 上的各种线程和这里的一两个网页向我提供的解决方案那里是我忘记存档的所有链接。不幸的是，我也遇到了身份验证问题，并且还必须研究一个单独的解决方案。这是我发送给我的开发团队的指令清单（稍微压缩一下，细节较少，以免成为一本书）：
注意：以下大多数步骤都需要管理您本地计算机上的帐户，或者如果您位于 AD 域中，则为 Active Directory 管理员帐户（或者要求域管理员授予您本地管理员权限 - 这就是我所做的）。
启用 IIS 和 Windows 身份验证
注意：如果这对您不起作用，那么您可能需要从头开始安装 IIS。
配置 IIS
注意：如果 ASP.NET v4.0 应用程序池不在步骤 2 的列表中，请按照以下应急步骤操作：
应用程序池应急情况
注意：这些步骤仅适用于在 IIS 管理器中选择应用程序池时使用，以防 ASP.NET v4.0 不是一个选项。
C:\Windows\Microsoft.NETcode> 目录即可找到它）。按 Enter/Return 键。dir以列出该文件夹的内容。在其中查找类似v4.0.30319的文件夹名称和cd。aspnet_regiis -ir。按 Enter/Return 键。现在，要预览您的网站，请将 VS2010 项目配置为指向
http://localhost:，其中请注意，这些说明仅在带有 IIS 7.5 的 Windows 7 企业版上经过个人测试。即使您的环境与我的环境相同，您的应用程序也可能不同，因此您可能需要修改我的一些步骤。
我希望我在这里有所帮助，而不是多余。我想我可能只是将所有步骤编译在一个地方，而不是只给你一堆链接并说“祝你好运”。如果您（或任何人）希望了解上述步骤的更多详细信息，我可以更明确；我只是假设您对 Windows、IIS 和 Visual Studio 有一定程度的熟悉。
如果我找到上面提到的链接，我将编辑这篇文章并包含它们。
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.
Configure IIS
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.
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.dirto list the contents of this folder. Look for a folder name likev4.0.30319andcdinto it.aspnet_regiis -ir. Press Enter/Return.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.