时间戳

首页 > 解决方案 > svg 如何在 svg 符号上添加边框？

d3.js - svg 如何在 svg 符号上添加边框？

问题描述

我正在使用一个包含国家标志的大 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>

它效果很好，我可以简单地使用 svg #flag-be 和瞧，得到了我的标志。

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

但是，我想在标志周围添加一个边框（因为一些有很多白色的东西没有它看起来很奇怪），理想情况下只能通过 css 设置

当我将每个标志放入单独的 svg（使用边框）时它工作正常，但是当我使用多个标志作为单个 svg 容器的一部分时我未能使其工作（图表）

什么是最简单的？我应该在边框的每个符号中添加一个新元素吗？在 svg 中设置“使用”符号最灵活的样式是什么？

标签： d3.jssvg

解决方案

也不是元素<svg>也不是图形元素。试图设置一种样式来改变它们的图形外观只会导致其子代继承该样式。因此，如果您设置 a on ，它将被所有路径元素继承，并且您会在每个标志字段周围获得一个边框。<use><g>stroke<use>

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

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

推荐阅读