html - 如何修复位置和大小错误的 SVG 字形？

Question

我有一个包含许多图标的 SVG 文件:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN""http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg">
<metadata>Generated by Fontastic.me</metadata>
<defs>
<font id="myfont" horiz-adv-x="512">
<font-face font-family="myfont" units-per-em="512" ascent="480" descent="-32"/>
<missing-glyph horiz-adv-x="512" />

<glyph glyph-name="cap-table" unicode="&#97;" d="M426 227c-10-85-82-152-170-152-94 0-171 77-171 171 0 87 60 162 155 169l0-187z m-159 215c94 0 171-76 171-170 0-7-1-14-1-20l-170 0c0 0 0 190 0 190z"/>
<glyph glyph-name="cap-hamburger" unicode="&#98;" d="M378 319l-244 0c-15 0-27 12-27 27 0 15 12 27 27 27l244 0c15 0 27-12 27-27 0-15-12-27-27-27z m0-90l-244 0c-15 0-27 12-27 27 0 15 12 27 27 27l244 0c15 0 27-12 27-27 0-15-12-27-27-27z m0-91l-244 0c-15 0-27 13-27 27 0 15 12 27 27 27l244 0c15 0 27-12 27-27 0-14-12-27-27-27z"/>
<glyph glyph-name="cap-manage" unicode="&#99;" d="M270 135c-9 0-19 0-28 0-1 1-2 1-3 1-38 5-73 22-104 44-31 21-58 46-83 73 0 2 0 4 0 6 2 2 4 3 6 5 33 35 69 65 111 88 55 30 110 34 166 4 23-12 45-26 66-42 21-17 39-37 59-55 0-2 0-4 0-6-2-2-3-4-5-5-37-39-78-74-128-96-18-8-38-11-57-17z m-14 45c42 0 76 34 76 76 0 43-34 77-76 77-43 0-77-35-77-77 1-42 35-76 77-76z m0 31c-24 0-44 20-45 45 0 25 20 45 45 45 25 0 45-20 45-45 0-24-20-45-45-45z"/>
<glyph glyph-name="cap-my-holdings" unicode="&#100;" d="M157 278l200 0c20 0 37 17 37 38l0 37-50 0 0 25c0 21-16 38-37 38l-100 0c-21 0-37-17-37-38l0-25-50 0 0-37c0-21 17-38 37-38z m38 100c0 7 6 12 12 12l100 0c7 0 12-6 12-12l0-25-124 0z m224-28l0-35c0-34-28-62-62-62l-75 0 0-37c0-7-6-13-13-13l-25 0c-7 0-12 6-12 13l0 37-75 0c-34 0-62 28-62 62l0 35c-14-5-25-19-25-35l0-174c0-21 17-38 38-38l299 0c21 0 37 17 37 38l0 174c0 17-11 31-25 35z"/>
<glyph glyph-name="cap-svb-valuation" unicode="&#72;" d="M60.1,94.1H38L3.1,159.8v17.5h37.4v21.8h19.6v-21.8h10.1v-16.6H60.1V94.1z M40.5,160.7H19.7l20.5-39.9h0.3V160.7z M131.5,105.7c-2.5-4.1-5.9-7-10.1-8.8c-4.2-1.8-9.5-2.7-15.9-2.7c-7.8,0-13.9,1.6-18.3,4.7c-4.4,3.1-7.7,7.3-9.9,12.5 c-2.2,5.2-3.5,11.2-4,17.9c-0.5,6.7-0.7,13.7-0.7,21.1c0,9.3,0.5,17.2,1.6,23.7c1,6.5,2.8,11.7,5.3,15.8c2.5,4.1,5.9,6.9,10.2,8.6 c4.3,1.7,9.5,2.5,15.9,2.5c7.8,0,13.9-1.5,18.3-4.5c4.4-3,7.7-7,9.9-12.2c2.2-5.2,3.5-11.2,4-17.9c0.5-6.7,0.7-13.7,0.7-21.1 c0-9.3-0.5-17.2-1.6-23.7C135.8,115,134,109.8,131.5,105.7z M117,152c0,6.7-0.2,12.4-0.5,16.9c-0.3,4.6-0.9,8.2-1.8,10.9 c-0.8,2.7-2,4.7-3.5,5.8c-1.5,1.1-3.4,1.7-5.8,1.7c-2.3,0-4.2-0.4-5.6-1.3c-1.5-0.9-2.7-2.5-3.6-5c-0.9-2.4-1.5-5.7-1.9-9.9 c-0.3-4.2-0.5-9.6-0.5-16.2v-11.4c0-6.7,0.2-12.4,0.5-16.9c0.3-4.5,0.9-8.2,1.8-10.9c0.8-2.7,2-4.6,3.5-5.8 c1.5-1.1,3.4-1.7,5.8-1.7c2.3,0,4.2,0.4,5.6,1.3c1.5,0.9,2.7,2.5,3.6,5c0.9,2.4,1.5,5.7,1.9,9.9c0.3,4.2,0.5,9.6,0.5,16.2V152z M207.9,143.2c0-6.4-0.3-12.6-1-18.5c-0.7-5.9-2.2-11.2-4.5-15.7c-2.3-4.5-5.7-8.1-10-10.8c-4.4-2.7-10.2-4.1-17.5-4.1 c-11.9,0-20.5,3.2-25.9,9.6c-5.4,6.4-8.1,15.7-8.1,27.9c0,4.7,0.5,9.1,1.4,13.1c0.9,4,2.4,7.5,4.5,10.4c2,2.9,4.7,5.2,7.9,6.8 c3.3,1.6,7.2,2.4,11.9,2.4c4.7,0,8.8-0.8,12.1-2.4c3.3-1.6,5.9-3.8,7.6-6.5h0.3v5c0,3.9-0.1,7.4-0.4,10.7 c-0.3,3.3-0.9,6.1-1.9,8.5c-0.9,2.4-2.3,4.2-3.9,5.6c-1.7,1.3-4,2-6.8,2c-3.6,0-6.1-1.1-7.5-3.3c-1.4-2.2-2.2-5.3-2.2-9.3h-20.5 c0.1,5,1,9.3,2.6,12.7c1.6,3.4,3.8,6.1,6.5,8.2c2.7,2,5.8,3.4,9.3,4.2c3.5,0.7,7.1,1.1,10.9,1.1c8.6,0,15.3-1.6,20.1-4.7 c4.8-3.1,8.3-7.3,10.5-12.7c2.2-5.3,3.6-11.5,4-18.5C207.7,158,207.9,150.7,207.9,143.2z M182.8,144.1c-1.8,3.1-4.8,4.6-9.1,4.6 c-4.2,0-7.1-1.5-8.9-4.6c-1.8-3.1-2.7-8.2-2.7-15.3c0-3,0.1-5.7,0.4-8.2c0.2-2.5,0.8-4.7,1.6-6.6c0.8-1.9,2-3.3,3.5-4.4 c1.5-1,3.6-1.6,6.2-1.6c2.5,0,4.5,0.5,6,1.6c1.5,1,2.7,2.5,3.6,4.3c0.8,1.8,1.4,4,1.7,6.6c0.3,2.6,0.4,5.3,0.4,8.3 C185.5,136,184.6,141.1,182.8,144.1z M257.8,93.2h-26.4l-28,105.9h22.3l4.9-22.4h28.2l4.9,22.4h22.3L257.8,93.2z M234.2,159.3 l10.2-47.6h0.3l10.2,47.6H234.2z"/>

这是我如何链接到 CSS:

@font-face {
font-family: "myfont";
src:url("fonts/myfont.eot");
src:url("fonts/myfont.eot?#iefix") format("embedded-opentype"),
url("fonts/myfont.woff") format("woff"),
url("fonts/myfont.ttf") format("truetype"),
url("fonts/myfont.svg#myfont") format("svg");
font-weight: normal;
font-style: normal;

这里是我添加内容的方式:

.cap-icon-table:before {
content: "\61";
}
.cap-icon-hamburger:before {
content: "\62";
}
.cap-icon-manage:before {
content: "\63";
}
.cap-icon-my-holdings:before {
content: "\64";
}
.cap-icon-add-svb-valuation:before {
content: "\48";
}

所有图标都可以正常工作，没有任何问题，我的问题是我添加的最后一个字形 (cap-svb-valuation)，它是一个 Text SVG，当我添加他时，浏览器呈现出非常错误、小且反向旋转。我试图应用 CSS 属性来修复但没有成功。我无法读取图标本身来应用属性。这就是我使用图标的方式:

<div class="col-xs-6 col-sm-4 col-md-3 no-padding">
    <a class="quick-create-option" href="#">
      <span class="cap-icon-add-svb-valuation quick-create-icon"></span>
      <div class="quick-create-option-text">409a Valuations</div>
    </a>
  </div>

这里是不是遗漏了什么？在我看来，解决此问题的方法是使用 CSS 属性，但我就是无法编辑图标。

Answer 1

与常规 SVG 不同，字形的坐标系是倒置的。 Y 轴指向上方而不是下方。这意味着当您向字体添加字形时，您必须反转坐标。

如果您使用工具来创建字体，它应该会为您完成。如果您手动完成，那么在复制 d 之前，您需要在编辑器中翻转您的设计。属性跨越。没有办法在带有 transform 的字体中做到这一点属性或类似的东西。尽管您可以通过使用 CSS 转换翻转整个伪元素来在页面上完成此操作。

至于您对它是两个小的其他提示，这正是您设计它的方式。如果您希望它更宽，请向上缩放。然后添加一个合适的horiz-adv-x <glyph> 的值元素。水平前进的默认值为 512(在 <font> 元素中定义。

因此，例如，如果您将字形缩放 2 倍，那么您需要添加 horiz-adv-x="1024" (或多或少)。