タグ付けされた質問 「svg」

SVGマークアップをReactJSコンポーネントに埋め込むことはできますか？ render: function() { return ( <span> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmln ... </span> ); } エラーの結果： 名前空間属性はサポートされていません。ReactJSXはXMLではありません。 これを行う最も簡単な方法は何ですか。React ARTのようなものを使用することは、私がやろうとしていることに対してはやり過ぎです。

127 javascript  svg  reactjs 

閉まっている。この質問はスタックオーバーフローのガイドラインを満たしていません。現在、回答を受け付けていません。 この質問を改善してみませんか？Stack Overflowのトピックとなるように質問を更新します。 2年前休業。 この質問を改善する PDFをSVGに変換しようとしています。ただし、現在使用しているものは、すべてのテキストのすべての文字のパスをマップしています。つまり、ソースファイルのテキストを変更すると、見栄えが悪くなります。 PDFからSVGへの最もきれいなコンバーターは何なのか、と思っていました。うまくいけば、テキスト領域へのパスがなく、単純にそれを必要としないものです。ご存じのとおり、PDFとSVGはかなり似ているため、優れたコンバーターがいくつかあると思います。

114 pdf  svg 

したがって、通常、シンプルなスタイル設定を必要とするSVGアイコンのほとんどを含めるために、次のようにします。 <svg> <use xlink:href="/svg/svg-sprite#my-icon" /> </svg> 今、私は遅れて私の新しいフロントエンド開発スタックの可能性の成分として、それを評価するようReactJSで演奏されているしかし、私は、サポートされているタグ/属性のリストであることに気づいていないどちらuseかxlink:hrefサポートされています。 svgスプライトを使用して、ReactJSでこのようにロードすることは可能ですか？

114 svg  sprite  reactjs 

私はいくつかのSVGファイルがあることを指定widthしてheightだけでなく、viewboxこのように： <svg width="576pt" height="432pt" viewBox="0 0 576 432" > ... しかし、私が決めたサイズでブラウザに表示するにはどうすればよいですか？私はそれらを小さくして、試してみました： <object width="400" data="image.svg"></object> しかし、私は目に見えるスクロールバーを取得します。 SVGファイルをset widthおよびheightto に変更すると機能し100%ますが、SVGファイルで使用されているサイズに関係なく、HTMLでサイズを決定したいと考えています。これは可能ですか？

114 html  svg 

私は、ズーム可能なパン可能なグラフで基本的に何千ものポイントをレンダリングするプロジェクトを更新するために使用する適切なテクノロジーを選択しようとしています。Protovisを使用した現在の実装は、パフォーマンスが低いです。ここでそれをチェックしてください： http://www.planethunters.org/classify 完全に縮小すると約2000ポイントになります。下部のハンドルを使用して少し拡大し、ドラッグして移動します。あなたはそれがかなり途切れ途切れであり、あなたが本当に速いコンピュータを持っていない限り、あなたのCPU使用率はおそらく1つのコアで100％に上がることがわかります。フォーカスエリアへの変更ごとにprotovisへの再描画が呼び出されますが、これはかなり遅く、描画されるポイントが多いほど悪くなります。 インターフェースにいくつかの更新を加え、基礎となる視覚化テクノロジーを変更して、アニメーションとインタラクションの応答性を高めたいと思います。次の記事から、別のSVGベースのライブラリか、キャンバスベースのライブラリを選択するように見えます。 http://www.sitepoint.com/how-to-choose-between-canvas-and-svg/ Protovisから生まれたd3.jsはSVGベースであり、アニメーションのレンダリングに優れているはずです。ただし、パフォーマンスの上限がどれほど優れているかについては疑問です。そのため、KineticJSのようなキャンバスベースのライブラリを使用して、より完全なオーバーホールも検討しています。ただし、1つのアプローチを使い始める前に、これだけ多くのデータを使用して同様のWebアプリケーションを実行した人からの意見を聞き、意見を聞きたいと思います。 最も重要なのはパフォーマンスです。2番目の焦点は、他の対話機能の追加とアニメーションのプログラミングの容易さにあります。おそらく、一度に2000ポイントを超えることはなく、それぞれに小さなエラーバーがあります。ズームイン、ズームアウト、パンニングはスムーズである必要があります。最新のSVGライブラリがこれで適切な場合、おそらくd3の使いやすさはKineticJSなどの設定の増加よりも優先されます。ただし、キャンバスを使用することで、特に低速のコンピューターを使用する人にとって、パフォーマンスに大きな利点がある場合は、間違いなくその方法を好むでしょう。 NYTimesが作成した、SVGを使用しているが、順調にスムーズにアニメーション化するアプリの例：http : //www.nytimes.com/interactive/2012/05/17/business/dealbook/how-the-facebook-offering-compares.html。そのパフォーマンスが得られ、独自のキャンバス描画コードを記述する必要がない場合は、おそらくSVGを使用します。 一部のユーザーは、キャンバスレンダリングと組み合わせたd3.js操作のハイブリッドを使用していることに気付きました。しかし、私はこれについてオンラインで多くのドキュメントを見つけることができないか、その投稿のOPに連絡することができません。このようなDOM-to-Canvas（デモ、コード）の実装を経験したことがある方は、ぜひご連絡ください。データを操作できることと、データのレンダリング方法（したがってパフォーマンス）をカスタム制御できることの良いハイブリッドのようですが、すべてをDOMにロードしなければならない場合でも、処理が遅くなるのではないかと思います。 これに似た既存の質問がいくつかあることは知っていますが、まったく同じことを尋ねる質問はありません。ご協力いただきありがとうございます。 フォローアップ：私が最終的に使用した実装はhttps://github.com/zooniverse/LightCurvesにあります

114 html  canvas  svg  d3.js  kineticjs 

XMLの処理中にhref、次の行を使用して、属性から参照されているSVGファイルを出力HTMLに直接コピーしようとしています。 <xsl:copy-of copy-namespaces="yes" select="document(@href)"/> copy-namespacesデフォルト値はとにかく「はい」であるので、必要はありませんが、私はそれを試してみたかどうかについての質問を防止することを追加しました。 ファイルはHTMLにコピーされますが、名前空間要素はすべてホースされます。たとえば、コピーされる前は次のようなファイルです。 <rdf:RDF> <cc:Work rdf:about=""> <dc:format>image/svg+xml</dc:format> <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/> <dc:title/> </cc:Work> </rdf:RDF> </metadata> <g transform="translate(-519.21143,-667.79077)" id="layer1"> <image xlink:href="data:image/png;base64 その後は次のようになります。 <_0:RDF xmlns:_0="http://www.w3.org/1999/02/22-rdf-syntax-ns#"> <_0:Work xmlns:_0="http://creativecommons.org/ns#" about=""> <_0:format xmlns:_0="http://purl.org/dc/elements/1.1/">image/svg+xml</_0:format> <_0:type xmlns:_0="http://purl.org/dc/elements/1.1/" resource="http://purl.org/dc/dcmitype/StillImage"/> <_0:title xmlns:_0="http://purl.org/dc/elements/1.1/"/> </_0:Work> </_0:RDF> </metadata> <g id="layer1" transform="translate(-519.21143,-667.79077)"> <image href="data:image/png;base64 href画像要素の値に欠落しているxlink名前空間は特に問題です。 解釈なしでSVGファイルを読み取るためにこれをどのように異なる方法で実行できるかについての考えはありますか？ 「機能する」ソリューションが1つ見つかりましたが、これはハックであり、よりエレガントなものを希望します。 <xsl:template name="topic-image-svg"> <!-- Generate tags …

113 html  xml  svg  xslt-1.0  xslt-2.0 

2020年現在、どのファビコンディメンション、ファイル形式、メタ/リンクタグを使用する必要がありますか？これには、今日使用されているアップルのアイコン、Windows、Androidなどのデバイスが含まれます。 Operaを使用していますが、svg形式をサポートしていることがわかります。今日、svgを使用するのに最適なソリューションですか？「1つのファイルですべてに対応」というオプションはありますか？ 私は多くのウェブサイトを閲覧していて、さまざまな「ファビコンジェネレータ」をチェックしてきました。それらはすべて古いものであり、ほとんどがpngファイルで動作します。 例： icoとsvgにはどのコードを使用する必要がありますか？ <link rel="icon" href="favicon.ico" type="image/ico"> <link rel="icon" href="favicon.svg" type="image/svg+xml"> または、icoにさらにサイズが含まれている場合は、寸法を指定する必要がありますか？良い答えは見つかりませんでした。 <link rel="icon" sizes="16x16 24x24 32x32 48x48 64x64" href="favicon.ico"> 使用するファビコンの寸法、ファイル形式、メタ/リンクタグを入力してください。

113 html  svg  png  favicon 

目標は、<svg>要素がその親コン​​テナのサイズに拡張さ<div>れることです。この場合は、コンテナの大きさに関係なく、です。 コード： <style> svg, #container{ height: 100%; width: 100%; } </style> <div id="container"> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" > <rect x="0" y="0" width="100" height="100" /> </svg> </div> この問題の最も一般的な解決策viewBoxは、<svg>要素の属性を設定することです。 viewBox="0 0 widthOfContainer heightOfContainer" ただし、これは、要素内の<svg>要素に事前定義された幅や高さがある場合は機能しないようです。たとえば<rect>、上のコードの要素には、幅と高さが明示的に設定されています。 したがって、明らかな解決策は、これらの要素にも幅と高さを使用することです。しかし、これは実行する必要があるのでしょうか？特に、高さや幅<img src=test.svg >を明示的に設定しても問題なく機能し、問題なく拡張/縮小し<rect>ます。 のような要素<rect>とそのような他の要素の幅と高さをパーセンテージで定義する必要がある場合、Inkscapeでそれを設定して、<svg>ドキュメントのすべての要素が固定サイズの代わりにパーセンテージの幅、高さなどを使用するようにする方法があります。 ？

112 css  html  svg  responsive-design 

私は、データのセットに基づいてさまざまな州を着色する米国の動的に生成されたマップを含むWebプロジェクトに取り組んでいます。 このSVGファイルは、米国の優れた白地図を提供し、各州の色を非常に簡単に変更できます。難しいのは、IEブラウザーがSVGをサポートしていないため、svgが提供する便利な構文を使用するために、JPGに変換する必要があります。 GD2ライブラリのみでこれを実行するのが理想的ですが、ImageMagickも使用できます。どうすればいいのか全くわからない。 米国の地図上の州の色を動的に変更できるような解決策が検討されます。重要なのは、その場で色を簡単に変更できることと、クロスブラウザーであることです。PHP / Apacheソリューションのみ。

111 php  svg  imagemagick  jpeg  gd2 

Safari 10でのみ発生する非常に奇妙な問題が発生しました。トランプ、svg画像があり、これらはを使用して回転される場合がありtransform:rotate(xdeg)ます。 私が使用しているカードは赤いブロックパターンです。回転していない場合、または直角、つまり90、180、270度に回転している場合は、正常に見えます。しかし、それ以外の角度と背景パターンは青くなります！私はユーザーの1人からこれに関するレポートを受け取ったばかりで、奇妙なものを見たことはありません。他のブラウザはすべて正常に動作し、Safari 9は正常に動作します。 これはSafari 10の非常に奇妙なバグだと思いますが、回避策に関するアイデアはありますか？私は次の場所で最小限の再現を作成しました： https://jsfiddle.net/2zv4garu/1/

109 html  css  svg  safari 

svgファイルを表示したいのですが（svg画像がたくさんあります）、表示する方法が見つかりませんでした。react-native-svgのImageコンポーネントとUseコンポーネントを使用しようとしましたが、動作しません。そして、私はそれをネイティブな方法でやろうとしましたが、svg画像だけを表示するのは本当に大変な作業です。 コード例： import Svg, { Use, Image, } from 'react-native-svg'; <View> <Svg width="80" height="80"> <Image href={require('./svg/1f604.svg')} /> </SvgRn> </View> また、react nativeが基本的にsvgをサポートしていないことも知っていますが、誰かがこの問題をトリッキーな方法で修正したと思います（react-native-svgの有無にかかわらず）

109 javascript  svg  react-native 

HTMLテキストが要素を埋めるのと同じ方法で<text>コンテナに自動改行するものをSVG に表示したいと思います。それを行う方法はありますか？s を使用して行を余計に配置したくありません。<rect><div><tspan>

108 xml  text  svg  word-wrap 

でtypescript(*.tsx)ファイル私はこの文でSVGファイルをインポートすることはできません。 import logo from './logo.svg'; Transpilerさんのコメント：[ts] cannot find module './logo.svg'. 私のsvgファイルはただ<svg>...</svg>です。 しかし、.jsファイルでは、まったく同じインポートステートメントで問題なくインポートできます。ts transpilerに何らかの方法で設定する必要があるsvgファイルのタイプと関係があると思います。 これをtsファイルで機能させる方法を教えてください。

108 typescript  svg 

だからここに私が持っているものがあります： <path class="..." onmousemove="show_tooltip(event,'very long text \\\n I would like to linebreak')" onmouseout="hide_tooltip()" d="..."/> <rect class="tooltip_bg" id="tooltip_bg" ... /> <text class="tooltip" id="tooltip" ...>Tooltip</text> <script> <![CDATA[ function show_tooltip(e,text) { var tt = document.getElementById('tooltip'); var bg = document.getElementById('tooltip_bg'); // set position ... tt.textContent=text; bg.setAttribute('width',tt.getBBox().width+10); bg.setAttribute('height',tt.getBBox().height+6); // set visibility ... } ... これで、alert（）を使用しても、非常に長いツールチップテキストには改行がありません。それは、テキストが実際には2行あることを示しています。（ただし、「\」が含まれていますが、どうすれば削除 …

107 javascript  svg  newline  line-breaks 

<svg>タグを使用してSVGがドキュメントに直接含まれている場合、ドキュメントのスタイルシートを介してSVGにCSSスタイルを適用できます。ただし、（<object>タグを使用して）埋め込まれたSVGにスタイルを適用しようとしています。 次のコードのようなものを使用することは可能ですか？ object svg { fill: #fff; }

107 html  css  svg