Question

首先，让我为不知道正确的事物而道歉。我是SVG的新手，正在紧迫的期限内工作。

我想要一些我正在重新设计的网站的可扩展图标，并且我说服了我的图形艺术家朋友在Inkscape中为我创建这些图标。这些图标非常小，大约25像素x 25像素，用于表示电子邮件链接，内部链接和外部链接。我计划在网站上的每个锚标记上使用适当的标记。

她创建的图标相当不错，但是在浏览器中呈现很大。在Eclipse文本编辑器中打开图标，我可以看到以下值：

viewBox="0 0 540 540"
height="540"
width="540"

 y="0"

 preserveAspectRatio="none"
 height="540"
 width="540" />

在尝试缩小图标的过程中，我看到对本文的多次引用是缩放SVG的好参考：https://css-tricks.com/scale-svg/

不幸的是，由于我没有内置SVG，因此我对于需要做的事情感到非常困惑。（我不确定应该正确地称呼我的：外部SVG吗？）另外，我没有在HTML标记中使用IMG或SVG标签。我已经创建了特殊的锚类，称为内部链接，外部链接和电子邮件链接，并且通过:: before伪选择器来指向我的SVG，如以下示例所示：

/* External link */
.external-link {
    background-color: green;
}
.external-link::before { 
    content: url("../images/link-external-ana.svg") "  "; 
}

这种方法可以使我的HTML标记保持美观和简单，如以下示例所示：

<p>Skype is a widely used 
communications program that works on many computers, tablets, and WiFi-   connected smartphones. 
Skype can be downloaded at <a class="external-link"   href="https://www.skype.com/en/" target="_blank">the Skype website</a>.</p>

不幸的是，本文没有解决我未使用IMG或SRC标签或:: before选择器的content属性的方法，因此我真的不确定该如何减小图标尺寸。

对于它的价值，我自己修改了图标并更改了上述值，以便每次将540更改为35，将y更改为10以将其向下推一点，使其与锚点中显示的文本的基线，但我必须相信有更好的方法。编辑图标本身似乎将其永远限制为一个尺寸，并迫使我为我想要的每个尺寸制作图标的多个版本，这似乎使首先使它们可缩放的目标无法实现。我希望我可以不更改图标，仅调整CSS来控制缩放比例。

有可能吗？如果可以，怎么办？

Answer 1

我了解您需要在::before

中使用svg图标

在下一个示例中，我将svg图像用作::before和background-size:cover的背景图像。我还将width的{{1}}和height的{{1}}设置为与图像大小成比例。

::before

.external-link{width:100px; height:100px;margin:20px auto;}

.external-link:before{
content:"";
display:block;
width:30px;
height:35px;
background:skyblue;
background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/apple.svg);
background-size:cover}

Answer 2

非常感谢enxaneta，现在我的代码可以完全按照我的要求工作了。原始的SVG文件是完全不变的，而且我也能够保持原始的HTML不变。我没有添加enxaneta建议的div，只是这样做了：

<p>Skype can be downloaded at <a class="external-link" href="https://www.skype.com/en/" target="_blank">the Skype website</a>.

最终，我只需要对enxaneta的CSS进行一些微调，以使现在它说：

/* External link */
.external-link {
    background-color: green;
}
.external-link::before { 
    content: "";
    display: inline-block; /* was block */
    width: 30px;
    height: 25px;
    background-position: -3px 2px;
    background-image: url("../images/icons/link-external-ana.svg");
    background-size: cover; 
    }

高度略有降低，因此我可以将图标向下推几个像素。我添加了background-position属性，使我可以在图标的边界框内四处移动图标。我发现enxaneta提供的.external-link选择器中的width，height和margin属性完全没有区别，因此我只删除了它们。现在我的图标就出现在我想要的位置。

Enxaneta的回复对我来说非常有价值，因为我真的不知道我可以使用:: before伪选择器中content属性之外的任何东西！我看到的唯一示例仅显示了content属性。知道我可以使用那里的所有标准属性，这使我能够调整enxaneta的建议以适合我的确切需求。

我希望这对以后的人有所帮助。...

扩展非内联的SVG

2 个答案: