私は以前ここにポストを作りました。ReactJSインラインSVGのスタイリングとGoogleフォント
renderIcon() {
return this.props.logoStyle.iconGraphic.path.map((path) => {
return (
<path id={path.id} style={{"fill":this.props.logoStyle.iconColor}} d={path.d} />
);
});
}
renderLogo() {
let style = this.props.logoStyle;
return (
<svg width="300" height="100" className={"logo"} xmlns="http://www.w3.org/2000/svg">
<svg xmlns="http://www.w3.org/2000/svg">
<rect
id="background"
x="0"
y="0"
width="300"
height="100"
style={{fill: style.backgroundColor}}
/>
</svg>
<svg
xmlns="http://www.w3.org/2000/svg"
width={style.iconSize}
height={style.iconSize}
viewBox="0 0 1000 1000"
x="10"
y="13"
id="svg4272">
<g>
{this.renderIcon()}
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg">
<text
style={{
fontSize:style.fontSize,
fontFamily: style.fontFamily,
fill: style.fontColor
}}
id="text"
x="90"
y="58"
fontSize={style.fontSize}
>{style.companyName}</text>
</svg>
</svg>
);
}
render() {
let style = this.props.logoStyle;
//console.log(style);
return (
<div className="logo-preview">
{this.renderLogo()}
<canvas id="canvas" width="900" height="300"></canvas>
<button className="btn btn-success" onClick={this.onDownload}>Download</button>
</div>
);
}
すべて：
は、私は
がここに私）（レンダリング機能であるSVG要素にインラインカスタムフォントスタイルを提供するために、特定の構文を反応に関する新しい質問を投稿することが有益であろうと思いましたページ上で良いように見えますが、ユーザーが#canvasにSVGを描画して、ダウンロードをトリガーボタンを押したときに、それは彼らが本当にインラインでレンダリングされていないとして、それは、スタイリング要素を失うことは明らかです。
（this.renderIcon（から））のアイコンが正しく描画されます唯一のものです。
<rect>は完全に取り除かれます（または少なくとも塗りつぶされません）。<text>はカスタムフォントを失いますが、fontSizeとfillは正しく維持されます。 インポート：Using Google Fonts with SVG <object> dataURI：How to Include CSS style when converting svg to png
私が試したカスタムフォントに特異的に言えば、私はラインであること、私はデータURIにフォントをエンコードする必要がある、と含まれ、様々な資源から発見した
以下が、何も働いていない：フォントフェイス@
<svg xmlns="http://www.w3.org/2000/svg">
<style>
@font-face { font-family: 'pacifico'; src: url(data:application/font-woff;charset-utf08;base64,d09GR...) format('woff'); font-weight: normal; font-style: normal; }
</style>
<text
style={{
fontSize:style.fontSize,
fontFamily: style.fontFamily,
fill: style.fontColor
}}
id="text"
x="90"
y="58"
fontSize={style.fontSize}
>{style.companyName}</text>
</svg>
@fontFace（リアクトためにキャメルケース）は
<svg xmlns="http://www.w3.org/2000/svg">
<style>
@fontFace { fontFamily: 'pacifico'; src: url(data:application/font-woff;charset-utf08;base64,d09GR...) format('woff'); fontWeight: normal; fontStyle: normal; }
</style>
<text
style={{
fontSize:style.fontSize,
fontFamily: style.fontFamily,
fill: style.fontColor
}}
id="text"
x="90"
y="58"
fontSize={style.fontSize}
>{style.companyName}</text>
</svg>
この1つはでWebPACKのエラーをスロー 'のfontFamily：...' コロンを引用 '：' 予期しない文字として、閉じ括弧 '}'
を期待します@import
<svg xmlns="http://www.w3.org/2000/svg">
<style>
@import url('https://fonts.googleapis.com/css?family=Pacifico');
</style>
<text
style={{
fontSize:style.fontSize,
fontFamily: style.fontFamily,
fill: style.fontColor
}}
id="text"
x="90"
y="58"
fontSize={style.fontSize}
>{style.companyName}</text>
</svg>
EDIT：
私はバッククォートを使用し、このスレッドに出くわした：それはすべてのエラーを投げるが、それをキャンバスに描かれたときにはありませんEmbedding SVG into ReactJS そして、これを試してみましたが、それでも（キャメルケースと伝統的な構文の両方で試してみました）動作しませんでした
<style>
{ `@fontFace { fontFamily: 'pacifico'; src: url(data:application/font-woff2;charset=utf-8;base64,....; } ` }
</style>