CSS和创建svg图形的边框

Posted 2023-03-06

【中文标题】CSS和创建svg图形的边框

【英文标题】：CSS and creating border of svg figure

【发布时间】：2018-08-08 21:00:43

【问题描述】：

我有 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.

但我什么也没看到。当我将背景颜色更改为例如红色时，我在红色方块上看到白色星星。如何让它发挥作用？

【问题讨论】：

我发现我的任务不太好。你为什么要减去我？

希望您至少尝试自己编写代码。 Stack Overflow 不是代码编写服务。我建议你做一些additional research，通过谷歌或搜索SO，尝试一下。如果您仍然遇到问题，请返回您的代码并解释您尝试过的操作。

感谢@Paulie_D 的回复。请给我一点时间以获取更新。

【参考方案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"  />
  </svg>
</div>