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

Scalable Vector Graphics（SVG）は、HTMLでも使用できるXMLベースの2次元ベクターグラフィックス形式です。プロジェクトがSVGを使用しているという理由だけでこのタグを追加しないでください。代わりに、質問がSVGに関するものである場合、またはSVGで何かを達成する方法など、SVGに密接に関連している場合は、タグを追加してください。

14
jQuery SVG対Raphael [終了]
休業。この質問は意見に基づいています。現在、回答を受け付けていません。 この質問を改善してみませんか？この投稿を編集して、事実と引用で回答できるように質問を更新してください。 6年前休業。 この質問を改善する 私はSVGとJavaScript / jQueryを使用したインタラクティブなインターフェースに取り組んでおり、RaphaelとjQuery SVGのどちらを使用するかを決定しようとしています。知りたい 2つの間のトレードオフとは 開発の勢いがあるようです。 RaphaelでのVML / IEサポートや、jQuery SVGのプロット機能は必要ありません。私は主に、SVGキャンバスで個々のアイテムを作成、アニメーション化、および操作する最もエレガントな方法に関心があります。
8
疑似要素：beforeまたは：afterのコンテンツとしてSVGを使用する方法はありますか
選択した要素の前にSVG画像を配置したい。私はJQueryを使用していますが、それは無関係です。：before要素を次のようにしたい： #mydiv:before { content:"<svg.. code here</svg>"; display:block; width:22px; height:10px; margin:10px 5px 0 10px; } 上記のように実行すると、文字列が表示されるだけです。スペックを確認したところ、内容に制限があるようです。この制限に対する回避策はありますか？私の質問に関連するのはコンテンツのcssだけです。
245 css  svg 
7
親コンテナでsvgスケールを作成するにはどうすればよいですか？
サイズがネイティブではない場合、インラインsvg要素のコンテンツスケールが必要です。もちろん、別のファイルにして、そのようにスケーリングすることもできます。 index.html： <img src="foo.svg" style="width: 100%;" /> foo.svg： <svg width="123" height="456"></svg> ただし、CSSを介してSVGにスタイルを追加したいので、外部スタイルをリンクすることはできません。インラインSVGスケールを作成するにはどうすればよいですか？
236 css  html  svg  scaling 
12
HTMLでティアドロップを作成するにはどうすればよいですか？
このような形状を作成してWebページに表示するにはどうすればよいですか？ スケーリングでぼやけてしまうので、画像は 使いたくない 私はCSSで試しました： .tear { display: inline-block; transform: rotate(-30deg); border: 5px solid green; width: 50px; height: 100px; border-top-left-radius: 50%; border-bottom-left-radius: 50%; border-bottom-right-radius: 50%; } <div class="tear"> </div> コードスニペットを実行する結果を非表示スニペットを展開 それは本当に台無しになりました。 そして、私はSVGで試しました： <svg viewBox="0 100 100"> <polygon points="50,0 100,70 50,100 0,70"/> </svg> コードスニペットを実行する結果を非表示スニペットを展開 形は取れましたが、底が曲がっていませんでした。 HTMLページで使用できるようにこの形状を作成する方法はありますか？
222 html  css  svg  css-shapes 
10
SVGのストローク幅の描画方法を制御できますか？
現在、ブラウザベースのSVGアプリケーションを構築しています。このアプリ内では、長方形を含むさまざまな形状をユーザーがスタイル設定および配置できます。 sayのstroke-widthSVG rect要素にaを適用すると1px、ストロークはrectのオフセットとインセットにさまざまなブラウザによってさまざまな方法で適用されます。これは、特に長方形の外側の幅と視覚的な位置を計算して、他の要素の隣に配置しようとするときに、厄介であることがわかります。 例えば： Firefoxは1pxインセット（下と左）と1pxオフセット（上と右）を追加します Chromeは1ピクセルのインセット（上と左）と1ピクセルのオフセット（下と右）を追加します これまでの私の唯一の解決策は、実際に境界線を自分で（おそらくpathツールを使用して）描画し、境界線をストローク要素の背後に配置することです。しかし、この解決策は不快な回避策であり、できればこの道をたどらない方がいいと思います。 だから私の質問は、SVG stroke-widthを要素に描画する方法を制御できますか？
204 svg  offset  rect 
4
'xmlns'や 'version'などのSVGパラメータは必要ですか？
私がインターネットで目にするsvgの例の約半分では、コードは単純な単純な<svg></svg>タグでラップされています。 残りの半分では、svgタグには次のような複雑な属性がたくさんあります。 <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"> 私の質問は：単純なsvgタグを使用しても大丈夫ですか？私は複雑なものをいじってみましたが、それらを含めなければすべてがうまくいきます。
203 xml  svg  tags 
4
SVGポジショニング
私はSVGで遊んでいて、ポジショニングにいくつか問題があります。gグループタグに含まれる一連の図形があります。コンテナーのように使用したいと思っていたので、x位置を設定すると、そのグループのすべての要素も移動します。しかし、それは可能ではないようです。 ほとんどの人は、一緒に移動したい要素のグループをどのように配置しようとしていますか？ 相対配置の概念はありますか？例：親を基準
203 svg  position  grouping 
7
SVGコンテンツを削除または置換するにはどうすればよいですか？
svgチャートを含む要素を（D3.jsを使用して）作成するJavaScriptコードがあります。AJAXを使用してWebサービスからの新しいデータに基づいてグラフを更新したいのですが、問題は、更新ボタンをクリックするたびに新しいが生成さsvgれるため、古いデータを削除するか、そのコンテンツを更新することです。 以下は、私が作成するJavaScript関数のスニペットsvgです。 var svg = d3.select("body") .append("svg") .attr("width", w) .attr("height", h); 古いsvg要素を削除したり、少なくともそのコンテンツを置き換えるにはどうすればよいですか？
200 javascript  ajax  svg  d3.js 
8
CSSでsvgパスの塗りつぶし色を変更できますか？
私は次のコードを持っています： <span> <svg height="32" version="1.1" width="32" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: relative; left: -0.0166626px; top: -0.983337px;"> <desc></desc> <defs/> <path style="" fill="#333333" stroke="none" d="M15.985,5.972C8.422,5.972,2.289999999999999,10.049,2.289999999999999,15.078C2.289999999999999,17.955,4.302999999999999...............1,27.68,22.274Z"/> </svg>  </span> 実際にパスタグ内で変更せずに、CSSまたは他の方法でSVGパスの塗りつぶし色を変更することはできますか？
200 css  svg 
14
jqueryの追加はsvg要素で機能しませんか？
これを想定すると： <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("svg").append('<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>'); }); </script> </head> <body> <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100" width="200px" height="100px"> </svg> </body> 何も表示されないのはなぜですか？
199 jquery  html  svg 
13
（円の）弧のSVGパスを計算する方法
（200,200）を中心とする半径25の円が与えられた場合、270度から135度の円弧と270度から45度の円弧をどのように描画しますか？ 0度は、x軸の右側（右側）であることを意味します（つまり、3時の位置です）270度は、12時の位置であることを意味し、90は、6時の位置であることを意味します より一般的には、円の一部の円弧のパスは x, y, r, d1, d2, direction 意味 center (x,y), radius r, degree_start, degree_end, direction
191 svg 
5
SVG：rect内のテキスト
SVG 内にテキストを表示したいrect。出来ますか？ 私は試した <svg xmlns="http://www.w3.org/2000/svg"> <g> <rect x="0" y="0" width="100" height="100" fill="red"> <text x="0" y="10" font-family="Verdana" font-size="55" fill="blue"> Hello </text> </rect> </g> </svg> しかし、それは機能しません。
180 text  svg  rect 
10
SVGの長方形にテキストを配置して中央揃えにする方法
次の長方形があります... <rect x="0px" y="0px" width="60px" height="20px"/> その中の「フィクション」という言葉を中心にしたいと思います。他の四角形の場合、SVGワードラップは四角形内にとどまりますか？水平方向と垂直方向の両方で中央揃えになっている図形内にテキストを挿入したり、ワードラップしたりすることについて、特に何も見つからないようです。また、テキストは長方形を離れることはできません。 http://www.w3.org/TR/SVG/text.html#TextElementを見る例を、テキスト要素のxとyは長方形のxとyとは異なるため、役に立ちません。テキスト要素の幅と高さがないようです。ここでの数学はわかりません。 （私のhtmlテーブルは機能しません。）
179 text  svg 
8
MarkDownにSVG（GitHubでホスト）を含める
![Alt text](/path/to/img.jpg)またはのMD構文を使用して画像をMDに配置できることは知っています![Alt text](/path/to/img.jpg "Optional title")が、コードがGitHubでホストされているMDにSVGを配置するのが困難です。 最終的にはrails3を使用し、現在モデルを頻繁に変更しているため、RailRoadyを使用してモデルのスキーマ図のSVGを生成しています。次に、そのSVGをReadMe.mdに配置して表示します。SVGファイルをローカルで開くと機能しますが、ブラウザでMDファイルにSVGをレンダリングするにはどうすればよいですか？ファイナライズされるまでコードが動的になると思われるため（おそらく決してそうではありません）、SVGを別の場所でホストするのはやりすぎであり、これを達成するためのアプローチが欠けています。 私には、しようとしているSVGは、ここに GitHubの上：https://github.com/specialorange/FDXCM/blob/master/Rails/fdxcm/doc/models_brief.svg 実際の画像を使用して次のことを試し、構文が機能していることを確認しました。SVGコードがレンダリングされていないだけです。 ![Overview][1] [1]: https://github.com/specialorange/FDXCM/blob/master/doc/controllers_brief.svg "Overview" <img src="https://raw.github.com/specialorange/FDXCM/master/doc/controllers_brief.svg"> ![Alt text](https://raw.github.com/specialorange/FDXCM/master/doc/controllers_brief.svg) [Google Doc](https://docs.google.com/drawings/d/1B95ajItJTAImL2WXISX0fkBLYk3nldea4Vm9eo-VyE4/edit) : <img src="https://docs.google.com/drawings/pub?id=117XsJ1kDyaY-n8AdPS3_8jTgMyITqaoT3-ah_BSc9YQ&w=960&h=720"> <img src="https://raw.github.com/specialorange/FDXCM/master/doc/controllers_brief.svg"> <img src="https://docs.google.com/drawings/d/1B95ajItJTAImL2WXISX0fkBLYk3nldea4Vm9eo-VyE4/edit"> 結果を取得するには： 1：https : //github.com/specialorange/FDXCM/blob/master/Rails/fdxcm/doc/controllers_brief.svg "概要" Googleドキュメント：
173 svg  github  markdown 
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.