主页 / 问题 / 1297538
Accepted
Leonid
Asked:2022-06-21 19:55:06 +0000 UTC2022-06-21 19:55:06 +0000 UTC

HTML 中包含的 SVG 中的变量范围（定义、模板）

  • 772

在 SO 上的一个答案中注意到页面上HTML放置了多个标签（文件？）SVG。在第一个标签中设置了路径模板的<symbol></symbol>定义，在其他三个标签中读取了这个定义。此外，该声明xmlns也仅出现在第一种情况下。我尝试替换<symbol>为<g>- 一切仍然有效。

因此，问题：

1、如何SVG在模板或组定义的范围上考虑多个标签？是否可以在文档中的任何 SVG 标签（文件）中定义模板？

2. 为什么其他标签中省略了xmlns打开文件所需的属性，这是什么规则？SVG

3. 是否可以在 中包含SVG所有定义的文件，并在中head使用这些定义。bodySVG

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0" viewBox="0 0 9.8 14.8" >
<g id="marker" >
    <path   d="M9.831 4.916c0 2.714-3.538 8.487-4.913 9.867C3.437 13.307 0 7.631 0 4.916S2.201 0 4.916 0s4.915 2.201 4.915 4.916z"/>
    <circle cx="4.912" cy="4.916" r="2.932"  fill="#E7EDEF"/>
</g>
</svg>

<svg width="19.6" height="29.6" viewBox="0 0 9.8 14.8"> 
<use class="u1" href="#marker"  />
</svg>

<svg width="19.6" height="29.6" viewBox="0 0 9.8 14.8"> 
<use class="u2" href="#marker"  />
</svg>  

<svg width="19.6" height="29.6" viewBox="0 0 9.8 14.8"> 
<use class="u3" href="#marker"  />
</svg>

取自问题页面的代码：Fill property not working for svg sprite

html

2 个回答

  1. Best Answer

    正如正确评论者：@Alexey 十

    独立的 SVG 文件必须是有效的 XML 并且具有正确的命名空间。HTML 中嵌入的 SVG 由 HTML 解析器解析，它对命名空间一无所知

    我还将添加编写 SVG 代码时的错误，HTML 解析器也会跳过。

    这是一个浏览器陷阱，即使是经验丰富的开发人员在寻找应用程序失败或意外结果的原因时也会感到困惑。

    没有错误消息，HTML 解析器将简单地忽略 SVG 代码中的第一个错误，执行命令，但不会处理进一步的 SVG 行

    原因可能是微不足道的 - SVG 命令之一的标签未关闭。

    • 这在下面的示例中显示，标签未关闭<rect>

    <svg  xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
         width="400" height="400" viewBox="0 0 400 400" >  

<!-- Не закрыт тег rect, нужно "/>" либо "</rect>" -->
<rect x="50" y="50" width="50%" height="50%" rx="5%" fill="purple" > 
</svg>

    • 在第二个例子中，第二个 正确的命令被添加到第一个错误的命令中，标签关闭。

    应该绘制两个方块：洋红色和黄色，但是由于第一行出错，黄色方块不会显示：

    <svg  xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"
         width="400" height="400" viewBox="0 0 400 400" >  

<!-- Не закрыт тег rect, нужно "/>" либо "</rect>" -->
<rect x="50" y="50" width="50%" height="50%" rx="5%" fill="purple" > 
  <!-- Тег закрыт, но из-за ошибки в первой строке, эта не будет показана -->
<rect x="50" y="150" width="50" height="50 rx="5%" fill="gold" /> 
</svg>

    现在让我们将这些文件保存为 SVG 格式并在浏览器中运行它们：

    • Chrome 解析器将显示一条错误消息：

    在此处输入图像描述

    • 火狐解析器：

    在此处输入图像描述

    结论：

    在我看来，在独立的 SVG 文件中设计一个 SVG 应用程序并在 Firefox 中验证它是最好的。由于 Chrome 正在引入实验性技术，无需等待官方发布。SVG2 版本。

    所以在 Chrome 中可能有用的东西在 Safari 和 FF 中可能不起作用

    3. 是否可以在头部包含所有定义的 SVG 文件，并在 SVG 元素的正文中使用这些定义。

    是的，svg文件可以连接到Html inline，即只需复制SVG代码，如你在问题中指出的主题

    <object>当您需要包含大容量的 SVG 文件（例如精灵）时，您可以使用此方法添加文件

    可以在这里找到如何将 SVG 连接到 HTML

    • 2

  2. Javascript + SVG + 命名空间

    namespace一个例子，展示了创建 SVG 对象时 JS中指针值的重要性。

    顺便说一句，这是网络上最常见的问题之一，为什么setAttributeSVG 对象的属性在指定时不改变。

    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="400">
  <script type="text/ecmascript"><![CDATA[
    var svgNS = "http://www.w3.org/2000/svg";
    var xlinkNS = "http://www.w3.org/1999/xlink";
    function createCircle() {
      var newCircle = document.createElementNS(svgNS,"circle");
      newCircle.setAttribute(null,"cx",Math.random() * 100+250);    
      newCircle.setAttribute(null,"cy",Math.random() * 100+100);        
      newCircle.setAttribute(null,"r",Math.random() * 100);     
      newCircle.setAttribute(null,"stroke",Math.random() * 100);    
      newCircle.setAttribute(null,"fill-opacity",Math.random());        
      var red = Math.round(Math.random() * 255);
      var green = Math.round(Math.random() * 255);
      var blue = Math.round(Math.random() * 255);
      newCircle.setAttributeNS(null,"fill","rgb("+ red +","+ green+","+blue+")");
      document.getElementById("firstCircle").appendChild(newCircle);
    }   
     
  ]]></script>
    <g id="firstCircle" onclick="createCircle()"> 
  <rect x="50" y="20" width="150" height="30" rx="10" fill="yellowgreen"  />
    <text x="64" y="40" fill="purple"  font-size="16px">Create a new circle.</text>
     </g>
</svg>

    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="400">
  <script type="text/ecmascript"><![CDATA[
    var svgNS = "http://www.w3.org/2000/svg";
    var xlinkNS = "http://www.w3.org/1999/xlink";
    function createCircle() {
      var newCircle = document.createElementNS(svgNS,"circle");
      newCircle.setAttribute(null,"cx",Math.random() * 100+250);    
      newCircle.setAttribute(null,"cy",Math.random() * 100+100);        
      newCircle.setAttribute(null,"r",Math.random() * 100);     
      newCircle.setAttribute(null,"stroke",Math.random() * 100);    
      newCircle.setAttribute(null,"fill-opacity",Math.random());        
      var red = Math.round(Math.random() * 255);
      var green = Math.round(Math.random() * 255);
      var blue = Math.round(Math.random() * 255);
      newCircle.setAttribute(null,"fill","rgb("+ red +","+ green+","+blue+")");
      document.getElementById("firstCircle").appendChild(newCircle);
    }   
     
  ]]></script>
    <g id="firstCircle" onclick="createCircle()"> 
  <rect x="50" y="20" width="150" height="30" rx="10" fill="yellowgreen"  />
    <text x="64" y="40" fill="purple"  font-size="16px">Create a new circle.</text>
     </g>
</svg>

    现在让我们替换setAttribute为setAttributeNS

    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="400">
  <script type="text/ecmascript"><![CDATA[
    var svgNS = "http://www.w3.org/2000/svg";
    var xlinkNS = "http://www.w3.org/1999/xlink";
    function createCircle() {
      var newCircle = document.createElementNS(svgNS,"circle");
      newCircle.setAttributeNS(null,"cx",Math.random() * 100+250);  
      newCircle.setAttributeNS(null,"cy",Math.random() * 100+100);      
      newCircle.setAttributeNS(null,"r",Math.random() * 100);       
      newCircle.setAttributeNS(null,"stroke",Math.random() * 100);  
      newCircle.setAttributeNS(null,"fill-opacity",Math.random());      
      var red = Math.round(Math.random() * 255);
      var green = Math.round(Math.random() * 255);
      var blue = Math.round(Math.random() * 255);
      newCircle.setAttributeNS(null,"fill","rgb("+ red +","+ green+","+blue+")");
      document.getElementById("firstCircle").appendChild(newCircle);
    }   
     
  ]]></script>
    <g id="firstCircle" onclick="createCircle()"> 
  <rect x="50" y="20" width="150" height="30" rx="10" fill="yellowgreen"  />
    <text x="64" y="40" fill="purple"  font-size="16px">Create a new circle.</text>
     </g>
</svg>

    • 2

相关问题