CSS和创建svg图的边框

Question

我有SVG格式的星号文件。如何使用CSS制作该图形的边界（不是与该星形的整个正方形）？另外，如何在悬停效果上填充图像？

我试着添加html：

<i class="favorite"></i>

并在scss中：

.favorite {
  width: 17px;
  height: 16px;
  display: block;
  text-indent: -9999px;
  background-size: 17px 16px;
  background: url(../../../../../assets/images/icon-star.
}

但我没有看到任何东西。当我将背景颜色更改为例如红色时，我看到红色正方形上的白色星星。如何使它工作？

Answer 1

您无法更改通过<img>或background-image包含的SVG的颜色。您需要在页面中将其包含在内。然后，您可以使用fill和stroke属性更改颜色。

.square {
  fill: red;
  stroke: blue;
  stroke-width: 4;
}

<div>
  <p>Hello world</p>
  <svg>
    <rect class="square" x="5" y="5" width="100" height="100"/>
  </svg>
</div>