是否可以将url(#id)属性与网页中的SVG元素一起作用域? [英] Is it possible to scope url(#id) attributes with SVG elements in a web page?

问题描述

在SVG中，您可以使用URL引用(例如url(#id))指向网页上的其他SVG元素.例如:

In SVG, you can use a URL reference, such as url(#id), to point to other SVG elements on a web page. For example:

<use filter="url(#my-filter)" ...></use>

但是，假设偶然，我遇到了这样的命名冲突:

But suppose that, by accident, I end up with a naming collision like this:

<svg>
  <defs>
    <filter id="my-filter" x="30">
  </defs>
  <use filter="url(#my-filter)"></use>
</svg>

<!-- somewhere else on my page --->
<svg>
  <defs>
    <filter id="my-filter" x="40">
  </defs>
  <use filter="url(#my-filter)"></use>
</svg>

不幸的是，这些url()引用似乎没有作用域.当显示此页面时，它们两个都将使用相同的过滤器-大概是第一个与选择器#my-filter匹配的元素(与位于每个<svg>上下文中的<filter>相对).

Unfortunately it seems that these url() references are not scoped. When this page displays, both of them will use the same filter -- presumably the first element to match the selector #my-filter (as opposed to the <filter> located within the <svg> context of each).

是否有某种方法可以添加作用域，以便每个参考点都指向预期的位置?还是只需要确保这些ID在我的网页上始终是全局唯一的?

Is there some way to add scoping so that each reference points to the intended place? Or do I just have to make sure that these ids are always globally unique on my web page?

推荐答案

否，id值必须为在页面上唯一.

(id)值在元素的主子树中的所有ID中必须是唯一的，并且必须至少包含一个字符.该值不得包含任何空格字符.

The (id) value must be unique amongst all the IDs in the element's home subtree and must contain at least one character. The value must not contain any space characters.

这篇关于是否可以将url(#id)属性与网页中的SVG元素一起作用域?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！