ASP.NET设置带命名空间前缀属性：SVG use元素xlink:href路径问题

这个问题我之前也碰到过，核心原因是浏览器不认识ASP.NET的~/虚拟路径标记，直接写的话它会把~/当成路径的一部分去解析，自然找不到文件。毕竟<use>的href是浏览器端直接处理的，不是服务器端控件默认会解析的属性。给你几个靠谱的解决办法：

• 方法一：使用服务器端绑定表达式解析路径
  直接在<use>的href属性里用<%= ResolveUrl("~/Content/images/test.svg#shape") %>，让ASP.NET帮你把虚拟路径转换成相对于应用程序的正确路径。代码改成这样：

  <svg class="xyz" width="25px" height="25px" fill="red">
    <use id="useLogo" runat="server" class="xyz" href='<%= ResolveUrl("~/Content/images/test.svg#shape") %>'></use>
  </svg>
  

  另外，现在SVG的标准里已经推荐用href代替xlink:href了，后者是旧标准，所以可以删掉xlink:href和对应的xmlns:xlink声明，简化代码。

• 方法二：后台代码动态设置路径
  如果不想在前端写绑定表达式，也可以在用户控件的后台代码（比如.ascx.cs）里设置<use>的href属性。首先确保<use>有runat="server"和ID：

  <svg class="xyz" width="25px" height="25px" fill="red">
    <use id="useLogo" runat="server" class="xyz"></use>
  </svg>
  

  然后在后台的Page_Load或者OnInit事件里添加代码：

  protected void Page_Load(object sender, EventArgs e)
  {
      useLogo.Attributes["href"] = ResolveUrl("~/Content/images/test.svg#shape");
  }
  

  这种方式更适合需要根据逻辑动态调整路径的场景。

• 方法三：使用Url.Content辅助方法
  如果你用的是ASP.NET MVC或者Web Forms中支持Url.Content的场景，也可以这样写：

  <svg class="xyz" width="25px" height="25px" fill="red">
    <use id="useLogo" runat="server" class="xyz" href='<%: Url.Content("~/Content/images/test.svg#shape") %>'></use>
  </svg>
  

  Url.Content和ResolveUrl的作用类似，都是解析虚拟路径，区别在于Url.Content会返回相对于站点根目录的路径，而ResolveUrl返回相对于当前页面的路径，但在用户控件里两者效果差不多。

需要注意的是，如果你用的是较新的ASP.NET版本（比如ASP.NET Core），ResolveUrl可能被替换成Url.Content或者IUrlHelper相关的方法，但核心思路都是让服务器端帮你把~/转换成浏览器能识别的路径。

内容的提问来源于stack exchange，提问作者Jeremy