ASPX + 渐变 SVG 在 Visual Studio 2010 上不起作用答案

【问题标题】：ASPX + gradient SVG not working on Visual Studio 2010ASPX + 渐变 SVG 在 Visual Studio 2010 上不起作用
【发布时间】：2011-11-06 23:03:24
【问题描述】：

我最近在设计网页时遇到了问题。我需要有圆角和渐变背景。对于 IE6-8、Firefox 和 Chrome，我使用 CSS3Pie 解决了它。由于 Pie 在 IE 9 上不起作用，我想出了SVG gradients。当我在本地机器上测试时，没有问题。一切还好。但是当我粘贴到我的 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>

渐变.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>

提前致谢！

【问题讨论】：

标签： asp.net css visual-studio-2010 internet-explorer svg

【解决方案1】：

我觉得我玩这个游戏可能有点晚了，但如果你仍然有这个问题，那么我可能会为你提供解决方案：

Cassini（ASP.Net 开发服务器）无法提供 SVG。对我（以及因此对我的整个开发团队）有用的解决方案是让 IIS 运行并将项目配置为使用 IIS 作为服务器环境运行。（另一种解决方案是只在页面内容中使用内联 SVG 数据，但我不建议这样做；我觉得它很乱。）

这就是 SO 上的各种线程以及这里和那里的一两个网页向我提供的解决方案，我忘记存档的所有链接。不幸的是，我也遇到了身份验证问题，并且还不得不研究一个单独的解决方案。这是我发送给我的开发团队的指令汇编列表（压缩了一点，细节较少，以免成为一本书）：

注意：以下大多数步骤需要本地计算机上的管理帐户，或者如果您在 AD 域中，则需要 Active Directory 管理员帐户（或要求域管理员为您提供本地管理员权限——这就是我所做的）。

启用 IIS 和 Windows 身份验证

注意：如果这对您不起作用，那么您可能需要从头开始安装 IIS。

转至开始 > 控制面板 > 程序和功能 > 打开和关闭 Windows 功能
在功能列表中，选中 Internet 信息服务旁边的框，然后展开树并导航到 Internet 信息服务 > 万维网服务 > 安全并选中 Windows 身份验证旁边的框。点击确定。

配置 IIS

打开“开始”菜单并在搜索框中输入“IIS”。按 Enter/Return 将其打开。
添加一个新站点，确保使用正确的应用程序池（我的应用程序是 MVC，依赖于 .NET 4.0）并将目录指向您存储项目副本的本地目录（我将我的保存在 C ：\项目\）。确保您指向 Web 应用程序的根文件夹，而不是项目的根文件夹（如果您使用 MVC，正确的文件夹将直接包含您的 Models/Views/Controllers 文件夹）。给站点一个端口号（只是编造一些东西，一些令人难忘的东西，但如果您打算同时在这台机器上测试多个项目，请不要使用“80”）。点击确定。
在树顶部的主服务器的配置窗格中，选择 MIME 类型并确保列表中有一个类似于“.svg”的条目 | "image/svg+xml" — 如果不存在，请自行添加。
在新网站的配置窗格中，选择身份验证。禁用除了“Windows 身份验证”之外的所有形式的身份验证 - 启用那个。

注意：如果 ASP.NET v4.0 应用程序池不在步骤 2 的列表中，请按照以下应急步骤操作：

应用程序池应急

注意：这些步骤仅适用于在 IIS 管理器中选择应用程序池时无法选择 ASP.NET v4.0 的情况。

打开一个命令终端。
键入cd C:\Windows\Microsoft.NET\Framework64（Framework64 文件夹名称可能不同，因此您可能只需查看C:\Windows\Microsoft.NET 目录即可找到它）。按 Enter/Return。
键入dir 以列出此文件夹的内容。在其中查找 v4.0.30319 和 cd 之类的文件夹名称。
键入aspnet_regiis -ir。按 Enter/Return。
完成后，关闭终端窗口并关闭/重新打开 IIS 管理器，然后再次启用“Windows 身份验证”。

现在，要预览您的网站，请将 VS2010 项目配置为指向 http://localhost:<port>，其中 <port> 是您在 配置 IIS 的步骤 2 中输入的端口号。您还需要为项目配置 Windows 身份验证。

请注意，这些说明仅在带有 IIS 7.5 的 Windows 7 企业版上进行了个人测试。即使您的环境与我的相同，您的应用程序也可能不同，因此您可能需要修改我的一些步骤。

我希望我在这里有所帮助而不是多余的。我想我可能只是将所有步骤汇总在一个地方，而不是只给你一堆链接并说“祝你好运”。如果您（或任何人）希望了解上述步骤的更多详细信息，我可以更加明确；我只是假设对 Windows、IIS 和 Visual Studio 有一定程度的熟悉。

如果我找到我上面提到的链接，我会编辑这篇文章并包含它们。

【讨论】：