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

SVGとHTML5 Canvasの違いは何ですか？どちらも私には同じことをしているようです。基本的に、どちらも座標点を使用してベクターアートワークを描画します。 何が欠けていますか？SVGとHTML5 Canvasの主な違いは何ですか？なぜどちらを選ぶべきなのですか？

92 html  canvas  svg 

変換したimage.svgをgoogleマップアイコンとして使用できますか？私は自分のpng画像をsvgに変換していましたが、これを回転できるgoogleマップシンボルのように使用したいと思います。私はすでにグーグルマップシンボルを使用しようとしましたが、車や男などのアイコンを使用したいので、このサンプルサイトのように、いくつかのpngファイルをsvgに変換しました。 /www.goprotravelling.com/

91 google-maps  google-maps-api-3  svg 

（D3.jsを使用して）一連のsvg長方形があり、マウスオーバーでメッセージを表示したいのですが、メッセージは背景として機能するボックスで囲まれている必要があります。それらは両方とも、互いに完全に位置合わせされ、長方形（上部と中央）に完全に位置合わせされている必要があります。これを行うための最良の方法は何ですか？ 「x」、「y」、「width」、「height」属性を使用してsvgテキストを追加してから、svgrectを付加してみました。問題は、テキストの参照点が中央にあることです（中央に揃えたいので、使用しましたtext-anchor: middle）が、長方形の場合は左上の座標であり、テキストの周りに少しマージンが必要でした。痛み。 もう1つのオプションは、html divを使用することでした。これは、テキストとパディングを直接追加できますが、各長方形の絶対座標を取得する方法がわからないためです。これを行う方法はありますか？

91 javascript  svg  d3.js  tooltip 

CSSを使用して、次の画像のような背景効果から透明なテキストを切り取る方法はありますか？ テキストに代わる画像のために、すべての貴重なSEOを失うのは悲しいことです。 最初は影のことを考えましたが、何もわかりません... 画像はサイトの背景、絶対配置<img>タグです

90 css  svg  fonts  css-shapes 

なぜ現代のWebサイトでアイコンにPNGのみを使用しているのか疑問に思っています（ただし、この仮定は私の観察に基づいています）。これまでのところ、SVGではなくPNGを使用する主な理由はIE8であり、SVGはより多くのCPUパワーを使用します（ただし、これが単純な1Kアイコンの問題であるとは思わない）。スプライト、画像、またはインラインSVGとして使用する場合、SVGを使用することには多くの利点があります（現在は使用しています）。 （調査を探している質問：PNGスプライトvs SVGスプライトvsアイコンフォントはパフォーマンスに焦点を当てており、関連する答えはありません。アイコンフォントvs. SVGキャッシングとネットワークの懸念はネットワークトラフィックに焦点を当てていますが、テンプレートなどで簡単に解決できます。） 新しいWebサイトが最新のブラウザーのみをサポートしている場合、SVGを使用しない理由はありますか（または-アイコンにPNGを使用する理由はありますか）？IE8を気にせず、SVGの使用がテンプレート化やキャッシュによってバックアップされている場合、SVGのみに依存するキャッチはありますか？

90 html  svg  icons 

Font AwesomeグリフからSVGパスデータを取得して、HTMLでSVGとして直接使用できるようにします。fontawesome-webfont.svgからパスデータをコピーして貼り付けるのと同じくらい簡単だと思いましたが、HTMLで使用すると、シンボルがすべて逆さまにレンダリングされます。誰もが理由を知っていますか？ （フィドルを参照） Font Awesome SVG： <glyph unicode="" horiz-adv-x="1408" d="M1408 131q0 -120 -73 -189.5t-194 -69.5h-874q-121 0 -194 69.5t-73 189.5q0 53 3.5 103.5t14 109t26.5 108.5t43 97.5t62 81t85.5 53.5t111.5 20q9 0 42 -21.5t74.5 -48t108 -48t133.5 -21.5t133.5 21.5t108 48t74.5 48t42 21.5q61 0 111.5 -20t85.5 -53.5t62 -81 t43 -97.5t26.5 -108.5t14 -109t3.5 -103.5zM1088 1024q0 -159 …

89 html  svg  font-awesome 

HTML5では、要素は、名前data-が<p data-myid="123456">。などで始まるXML属性に格納された任意のメタデータを持つことができます。これもSVG仕様の一部ですか？ 実際には、この手法は多くの場所のSVGドキュメントで問題なく機能します。しかし、それが公式のSVG仕様の一部であるかどうかを知りたいのです。フォーマットが十分に若いため、特にモバイルでは、ブラウザー間でまだ多くの非互換性があります。したがって、コードをコミットする前に、将来のブラウザーがこれをサポートすることに集中できるかどうかを知りたいと思います。 ワーキンググループのメーリングリストから、「彼らはそれをサポートすることを期待している」というこのメッセージを見つけました。これは公式になりましたか？

87 svg  web-standards 

いくつかの複合形状があるとしましょう（<g>）。クリックしてドラッグできるようにしたいのですが、たまたまドラッグしているものをZオーダーでもう一方の上に置き、もう一方の上にドラッグすると、もう一方の上にドラッグしたいのです。 1つは日食する必要があります。

85 javascript  svg 

svg要素の寸法を取得する適切な方法は何ですか？ http://jsfiddle.net/langdonx/Xkv3X/ Chrome 28： style x client 300x100 offset 300x100 IE 10： stylex client300x100 offsetundefinedxundefined FireFox 23： "style" "x" "client" "0x0" "offset" "undefinedxundefined" にはwidthプロパティとheightプロパティsvg1が.width.baseVal.valueありますが、要素にwidth属性とheight属性を設定した場合にのみ設定されます。 フィドルは次のようになります。 HTML <svg id="svg1" xmlns="http://www.w3.org/2000/svg" version="1.1"> <circle cx="50" cy="50" r="40" stroke="black" stroke-width="1" fill="red" /> <circle cx="150" cy="50" r="40" stroke="black" stroke-width="1" fill="green" /> <circle cx="250" cy="50" r="40" …

85 javascript  svg 

私は次のSVGを持っています： <svg> <g> <path id="k9ffd8001" d="M64.5 45.5 82.5 45.5 82.5 64.5 64.5 64.5 z" stroke="#808600" stroke-width="0" transform="rotate(0 0 0)" stroke-linecap="square" stroke-linejoin="round" fill-opacity="1" stroke-opacity="1" fill="#a0a700"></path> <path id="kb8000001" d="M64.5 45.5 82.5 45.5 82.5 64.5 64.5 64.5 z" stroke="#808600" stroke-width="0" transform="rotate(0 0 0)" stroke-linecap="square" stroke-linejoin="round" fill-opacity="1" stroke-opacity="1" fill="url(#k9ffb0001)"></path> </g> </svg> コードスニペットを実行するHide resultsスニペットを展開 私は、CSSのような取得したいborder-top-right-radiusとborder-top-bottom-radius効果を。 …

83 xml  image  svg  vector-graphics 

私はSVGをいじっていて、IllustratorでSVGファイルを作成し、Javascriptで要素にアクセスできることを望んでいました。 これがIllustratorがキックアウトするSVGファイルです（削除したファイルの先頭に大量のジャンクが追加されているようです） <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="276.843px" height="233.242px" viewBox="0 0 276.843 233.242" enable-background="new 0 0 276.843 233.242" xml:space="preserve"> <path id="delta" fill="#231F20" d="M34.074,86.094L0,185.354l44.444,38.519l80.741-0.74l29.63-25.186l-26.667-37.037 c0,0-34.815-5.926-37.778-6.667s-13.333-28.889-13.333-28.889l7.407-18.519l31.111-2.963l5.926-21.481l-12.593-38.519l-43.704-5.185 L34.074,86.094z"/> <path id="cargo" fill="#DFB800" d="M68.148,32.761l43.704,4.445l14.815,42.963l-7.407,26.667l-33.333,2.963l-4.444,14.074 l54.074-1.481l22.222,36.296l25.926-3.704l25.926-54.074c0,0-19.259-47.408-21.481-47.408s-31.852-0.741-31.852-0.741 l-19.259-39.259L92.593,8.316L68.148,32.761z"/> <polygon id="beta" fill="#35FF1F" points="86.722,128.316 134.593,124.613 158.296,163.872 190.889,155.724 …

83 javascript  svg  raphael 

D3ライブラリを使用してSVG要素をzオーダーの最上位に移動する効果的な方法は何ですか？ 私の特定のシナリオは、マウスが特定の部分の上にあるときに（にを追加strokeしてpath）強調表示する円グラフです。チャートを生成するためのコードブロックは次のとおりです。 svg.selectAll("path") .data(d) .enter().append("path") .attr("d", arc) .attr("class", "arc") .attr("fill", function(d) { return color(d.name); }) .attr("stroke", "#fff") .attr("stroke-width", 0) .on("mouseover", function(d) { d3.select(this) .attr("stroke-width", 2) .classed("top", true); //.style("z-index", 1); }) .on("mouseout", function(d) { d3.select(this) .attr("stroke-width", 0) .classed("top", false); //.style("z-index", -1); }); 私はいくつかのオプションを試しましたが、今のところ運がありません。両方の使用style("z-index")と呼び出しclassedは機能しませんでした。 「トップ」クラスは、私のCSSでは次のように定義されています。 .top { fill: red; z-index: 100; } …

81 javascript  svg  d3.js 

私はd3とsvgのコーディングに不慣れで、グラフのxAxis上でテキストを回転させる方法を探しています。私の問題は、通常、xAxisのタイトルが棒グラフの棒よりも長いことです。そのため、テキストを回転させて、xAxisの下で（水平ではなく）垂直に実行することを検討しています。 変換属性を追加してみました：.attr（ "transform"、 "rotate（180）"） しかし、そうすると、テキストが完全に消えてしまいます。svgキャンバスの高さを上げようとしましたが、それでもテキストを表示できませんでした。 私が間違っていることについての考えは素晴らしいでしょう。xとyの位置も調整する必要がありますか？そして、もしそうなら、どれだけ（Firebugでそれを見ることができるときにトラブルシューティングするのは難しい）。

81 text  svg  transform  d3.js 

JavaScriptを使用してSVGグラフィックを作成するにはどうすればよいですか？ すべてのブラウザがSVGをサポートしていますか？

80 javascript  graphics  svg 

HTMLテーブルがあり、1つのセルから別のセルに矢印を描画したいと思います。たとえば、次のようになります。 これはどのように行うことができますか？ HTMLの例： <html> <body> <table> <tr><td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td id="end">9</td><tr> <tr><td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><tr> <tr><td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><tr> <tr><td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><tr> <tr><td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><tr> <tr><td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><tr> <tr><td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><tr> <tr><td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><tr> <tr><td>0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><tr> <tr><td id="start">0</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><tr> </body> </html> ブラウザのサイズを変更する場合、矢印は（新しい）開始/終了位置に留まるはずです。

13 javascript  html  svg