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）、そのテキスト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変換で反転させることで、ページ上でそれを行うことは可能かもしれませんが。

それは2つの小さなことについてのあなたの他の苦情については、それはあなたがそれを設計した方法です。それをもっと広くしたい場合は、それを上に拡大してください。次に、適切なhoriz-adv-x値を<glyph>要素に追加します。水平方向の事前のデフォルト値は<font>要素で定義された（512です。

したがって、たとえば、あなたは、あなたが）horiz-adv-x="1024"（多かれ少なかれを追加する必要があり、2倍でグリフをスケーリングし、場合。