Question

我希望在我的页面中有一个Task<bool> SaveImage(string directory, string filename, ImageSource img);标记，其中包含我将在其他SVG元素上使用的所有SVG定义。
像这样的东西：

＆＃13;

<svg>

＆＃13;

这样做有效，但问题是浏览器会在<html> <head> <svg> <defs> <filter id="shadow1"> <feDropShadow dx="3" dy="7" stdDeviation="2"/> </filter> </defs> </svg> </head> <body style="display: flex"> <svg viewBox="0 0 100 100" width="100"> <path d="M0,0 L50,50" stroke="red" filter="url(#shadow1)" /> </svg> </body> </html>中呈现<svg>标记，就好像它在体内一样。

如果我在<head>标记上设置了width=0和height=0，它就会消失，但它仍然是<svg>的子元素。

是否可以使<body>标记仅包含定义但在页面外<svg>？

或者至少某种方式告诉浏览器<body>元素纯粹是声明性的，并不意味着它是文档可见区域的一部分。

P.S。：我不想使用外部.svg文件，因为里面的定义是动态的，取决于正在查看的页面。

Answer 1

不，SVGElement (<svg>)不属于meta-data contents，只有<head>中允许的内容类型。它必须是<body>的后代。

但是你可以用CSS绝对放置它，将它的z-index设置为-1，将它的size属性设置为0并且它不会被渲染。

＆＃13;

svg.defs {
  position: absolute;
  z-index: -1;
}

＆＃13;

<svg width="0" height="0" class="defs">
  <defs>
    <filter id="shadow1">
      <feDropShadow dx="3" dy="7" stdDeviation="2"/>
    </filter>
  </defs>
</svg>
<svg viewBox="0 0 100 100" width="100">
  <path d="M0,0 L50,50" stroke="red" filter="url(#shadow1)" />
</svg>

＆＃13;

不要仅使用定义来渲染SVG元素

1 个答案: