Question

我正在使用包含国家标志的大型svg，例如

<symbol viewBox="0 0 640 480" id="flag-be"><g fill-rule="evenodd" stroke-width="1pt"><path d="M0 0h213.34v480H0z"/><path fill="#ffd90c" d="M213.34 0h213.33v480H213.33z"/><path fill="#f31830" d="M426.67 0h213.34v480H426.66z"/></g></symbol>

效果很好，我可以简单地使用＃flag-be和voila来svg，得到我的标志。

<svg class="icon flag-be"><use href="#flag-be"></use></svg>

但是，我想在标志周围添加边框（因为有些标志没有很多白色http://docs.sqlalchemy.org/en/latest/orm/join_conditions.html#configuring-how-relationship-joins），理想情况下只能通过css进行设置

当我将每个标志放入单独的svg（使用边框）时，效果很好，但是当我将多个标志用作单个svg容器（图形）的一部分时，我无法使其工作

最简单的是什么？谁在边框的每个符号中添加一个新元素？在svg中设置“二手”符号样式的最灵活方法是什么？

Answer 1

<svg>或<use>或<g>元素都不是 graftic 元素。试图设定一种样式以改变其嫁接外观只会导致其子代继承样式。因此，如果您在stroke上设置了<use>，它将被所有路径元素继承，并且您会在每个标志字段周围得到一个边框。

（要记住的一点：用<use>元素克隆的内容可以继承样式，但是它们不能用CSS选择器作为目标。）

那么为什么在最外层的 border元素上设置<svg>呢？因为该元素被视为HTML命名空间的一部分，并且像普通的<span>一样呈现，而对于SVG命名空间中的子元素，border属性没有任何意义。

在您的用例中，您需要在整个标记周围添加一个图形元素。大概是在使用时，像这样：

<svg ...>
    ...
    <svg class="icon flag-be" width="24" height="16">
        <use href="#flag-be" />
        <rect width="100%" height="100%" style="fill:none;stroke:black;stroke-width:1" />
    </svg>
    ...
</svg>

请注意内部<svg>元素。其目的是参考<rect>的宽度和高度百分比。否则，它们将相对于外部 <svg>进行计算。

当前，必须将width和height设置为内部<svg>元素上的属性。 SVG 2将它们定义为可以用CSS设置的表示属性，但是某些浏览器仍然只允许在外部<svg>元素上使用。

svg如何在svg符号上添加边框？

1 个答案: