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

svgのx属性とdx属性（またはyとdy）の違い​​は何ですか？軸シフト属性（dx）と場所属性（x）を使用する適切なタイミングはいつですか？ たとえば、私はこのようなことをしているd3の多くの例に気づきました chart.append("text") .attr("x", 0) .attr("y", 0) .attr("dy", -3) .text("I am a label") 以下が同じことをしているように思われる場合、yとdyの両方を設定する利点または理由は何ですか？ chart.append("text") .attr("x", 0) .attr("y", -3) .text("I am a label")

106 svg  d3.js 

私はSVGファイルのECMAScript / JavaScriptに取り組んでいて、要素のwidthand を取得して、それを囲む長方形のサイズを変更できるようにする必要があります。HTMLでは要素のおよび属性を使用できますが、これらのプロパティは使用できないようです。heighttextoffsetWidthoffsetHeight これが私が作業する必要があるフラグメントです。テキストを変更するたびに長方形の幅を変更する必要がありますがwidth、text要素の実際のサイズ（ピクセル単位）を取得する方法がわかりません。 <rect x="100" y="100" width="100" height="100" /> <text>Some Text</text> 何か案は？

105 javascript  dom  text  svg 

enable-background属性は正確に何をしますか？ 仕様書を読みましたが、まだ理解できません。

104 svg 

JavaScriptを使用してSVGドキュメントの特定の要素のサイズを変更し、回転する必要があります。問題は、デフォルトで、常に(0, 0)左上の原点の周りに変換を適用することです。 この変換アンカーポイントを再定義するにはどうすればよいですか？ transform-origin属性を使用してみましたが、何の影響もありません。 これは私がそれをした方法です： svg.getDocumentById('someId').setAttribute('transform-origin', '75 240'); 属性が正しく設定されていることをFirefoxで確認できますが、ピボットポイントを指定したポイントに設定していないようです。私はのようなものを試してみましたcenter bottomし、50% 100%とし、括弧なし。これまで何も機能しませんでした。 誰か助けてもらえますか？

104 svg  coordinate-transformation 

SVG要素のストローク幅を「ピクセル対応」に設定できるようにしたいと思います。これは、現在適用されているスケーリング変換に関係なく、常に1px幅です。SVGの全体のポイントはピクセルに依存しないため、これは不可能であることは承知しています。 コンテキストは次のとおりです。 私は、viewBoxとpreserveAspectRatio属性が設定されたSVG要素を持っています。こんな感じ <svg version="1.1" baseProfile="full" viewBox="-100 -100 200 200" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" > </svg> これは、その要素を拡大縮小すると、要素内の実際の形状がそれに応じて拡大縮小されることを意味します（これまでのところ、これで十分です）。 ご覧のとおり、原点が中央になるようにviewBoxを設定しました。その要素内にx軸とy軸を描画したいので、次のようにします。 <line x1="-1000" x2="1000" y1="0" y2="0" /> 繰り返しますが、これは問題なく機能します。ただし、理想的には、この軸の幅は常に1ピクセルのみです。親のsvg要素をスケーリングしたときに軸が太くなることに関心がありません。 だから私はねじ込まれていますか？

103 svg  visualization 

各SVGファイル内ではなく、外部スタイルシートを使用して色を変更したいSVGグラフィックがいくつかあります。グラフィックをインラインで配置するのではなく、画像フォルダに保存して、ポイントします。 ツールチップが機能するようにこれらをこの方法で実装し<a>、リンクを許可するためにそれぞれをタグでラップしました。 <a href='http://youtube.com/...' target='_blank'><img class='socIcon' src='images/socYouTube.svg' title='View my videos on YouTube' alt='YouTube' /></a> そして、これがSVGグラフィックのコードです： <?xml version="1.0" encoding="utf-8"?> <?xml-stylesheet href="stylesheets/main.css" type="text/css"?> <!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" viewBox="0 0 56.69 56.69"> <g> <path d="M28.44......./> </g> </svg> 次のコードを外部CSSファイル（main.css）に追加しました。 .socIcon g {fill:red;} ただし、グラフィックには影響しません。.socIcon gパス{}と.socIconパス{}も試しました。 何かが正しくない、おそらく私の実装では外部CSSの変更が許可されていないか、または手順を逃しましたか？よろしくお願いします！外部スタイルシートを介してSVGグラフィックの色を変更する機能が必要なだけですが、ツールチップとリンク機能を失うことはありません。（私はツールチップなしで生きることができるかもしれません。）ありがとう！

102 html  css  svg  stylesheet  external 

閉まっている。この質問はスタックオーバーフローのガイドラインを満たしていません。現在、回答を受け付けていません。 この質問を改善してみませんか？Stack Overflowのトピックとなるように質問を更新します。 6年前休業。 この質問を改善する 私は、C＃を使用して、SVG画像をPNGに変換しようとしましたが、あまり多くのコードを記述する必要はありません。誰もがこれを行うためのライブラリまたはサンプルコードを推奨できますか？

102 c#  .net  png  svg 

SVG rect要素にグラデーションを適用しようとしています。 現在、私はfill属性を使用しています。私のCSSファイル： rect { cursor: pointer; shape-rendering: crispEdges; fill: #a71a2e; } また、rect要素はブラウザで表示したときに正しい塗りつぶし色になります。 ただし、この要素に線形グラデーションを適用できるかどうか知りたいですか？

102 css  svg  gradient  linear-gradients 

CSSでのtextようにsvgの背景に色を付けたいbackground-color fillテキスト自体に色を付けるに関するドキュメントのみを見つけることができました それも可能ですか？

101 css  svg  background-color 

Pythonでsvgをにどのように変換しpngますか？をsvgのインスタンスに格納していますStringIO。pyCairoライブラリを使用する必要がありますか？どうやってそのコードを書くのですか？

99 python  svg  rendering  cairo 

私はSVGドキュメントを持っていて、その中に外部svg画像を含めたいです。 <object data="logo.svgz" width="100" height="100" x="200" y="400"/> （「オブジェクト」は単なる例です-外部ドキュメントはxhtmlではなくSVGになります）。 何か案は？これは可能ですか？それとも、logo.svg xmlを外側のSVGドキュメントに単純にスラップするのが最善ですか？

98 xml  svg  embedding 

imgタグでsvgをレンダリングしないグーグルクロームに問題があります。これは、ページを更新して最初のページを読み込んだときに発生します。「要素の検査」で画像を表示し、svgファイルを右クリックして、新しいタブでsvgファイルを開きます。その後、svg画像が元のページにレンダリングされます。 <img src="../images/Aged-Brass.svg"> 問題が何であるかに関して、ここで完全に途方に暮れています。svg画像は、ChromeやSafariではなく、IE9とFFで正常にレンダリングされます。 MIMEタイプも設定しています。（image / svg + xml） 編集：これ は私の問題を説明するために作成した簡単なhtmlページです。 <!DOCTYPE html> <html> <head> <title>SVG Test</title> <style> #BackgroundImage{ background: url('../images/Aged-Brass.svg') no-repeat scroll left top; width: 400px; height: 600px; } #ImageTag{ width: 400px; height: 600px; margin: 0px; padding: 0px; } </style> </head> <body> <div id="ImageTag"> <img src="../images/Aged-Brass.svg"> </div> <div id="BackgroundImage"></div> …

95 google-chrome  svg 

簡単なはずですが、なかなか手に入れません。 スクロールせずに、アスペクト比を維持しながら、ブラウザウィンドウに合わせて自動的に拡大縮小する単一のSVG画像を含むHTMLページを作成したいと考えています。 たとえば、現時点では1024x768のSVG画像があります。ブラウザのビューポートが1980x1000の場合、画像を1333x1000で表示します（垂直方向に塗りつぶし、水平方向に中央揃えにします）。ブラウザが800x1000だった場合、800x600で表示したいと思います（水平方向に塗りつぶし、垂直方向に中央揃えにします）。 現在、私はそれを次のように定義しています： <body style="height: 100%"> <div id="content" style="width: 100%; height: 100%"> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" viewBox="0 0 1024 768" preserveAspectRatio="xMidYMid meet"> ... </svg> </div> </body> ただし、これはブラウザーの全幅に拡大し（幅が広く短いウィンドウの場合）、垂直スクロールを生成します。これは私が望んでいることではありません。 何が欠けていますか？

94 layout  xhtml  svg  scaling  aspect-ratio 

ストローク幅の設定：<rect>SVGの要素に1を設定すると、長方形のすべての辺にストロークが配置されます。 SVG長方形の3辺だけにストローク幅を配置するにはどうすればよいですか？

93 html  svg  vector-graphics  inkscape 

これが問題の実例です（FirefoxとChromeでテスト済み）： <div style="background-color: red;"><svg height="100px" width="100" style="background-color: blue;"></svg></div> コードスニペットを実行する結果を非表示スニペットを展開 JSFiddleで表示 青redのdiv下の内側の余分なスペースに注意してくださいsvg。 paddingとmargin両方の要素をに設定しようとしまし0たが、運がありませんでした。

93 html  css  svg