• ImageMagickを使って、SVGをアンチエイリアス付きの透明なPNGに変換する

    質問 私はSVG画像を透明な背景とアンチエイリアスされたエッジ(半透明なピクセルを使用)を持つPNGファイルに変換したいのです。残念ながら、私はImageMagickにアンチエイリアスを行わせることができず、エッジは常にひどいように見えます。以下は、私が試したことです。 convert +antialias -background transparent in.svg -resize 2

    2023-10-20 06:17:16
  • flip svg 座標系

    質問 SVGの座標系を反転させて、[0,0]が左上ではなく左下になるようにする方法はないでしょうか? どのように解決するのですか? いろいろと実験してみましたが、論理的には次のような方法しかありません。 <g transform="translate(0,400)"> <g transform="scale(1,-1)"> ここで、400は画像の高さで

    2023-09-29 22:05:22
  • SVGのパスに沿ってグラデーションを適用することはできますか?

    質問 私は、スクリプトによってトリガーされる簡単なローディングインジケータを私のウェブサイトに置きたいと思います。それはグラデーションを持つ単純な円弧でなければならず、ユーザーが待っている間、回転しています。アニメーションの部分は試していませんが、今のところ静的なスタイリングで行き詰まっています。今のところ、こんな感じです。 <svg version="1.1" basePr

    2023-09-20 23:46:57
  • SVGオブジェクトの拡大縮小とミラーリング

    質問 オブジェクトを現在のサイズの 2 倍に拡大縮小してから、垂直方向と水平方向、またはその両方に反転させるには、どのようにすれば最も簡単でしょうか? 今のところ、幅と高さが2倍になるように "scale(2,2)" を設定することはできますが、垂直反転のために scale(-1,1) で同時に反転させることができません。 エクスポートするためのフォーマットとして、プログラムでSVG

    2023-07-10 01:18:13
  • [解決済み] svgの簡単な塗りつぶしパターン:斜めのハッチング

    質問 SVGの図形を、単色や画像、グラデーションではなく、可能であれば斜めのハッチングパターンで塗りつぶすには、どうしたらよいでしょうか。 2時間経ちましたが、何も見つかりませんでした(少なくとも2005年以降)。 私は、可能なハックは、塗りつぶしとして機能するハッチングされた PNG であると考えますが、それは理想的ではありません。 どのように解決するのですか? 斜めのハッ

    2023-06-15 19:53:16
  • [解決済み] <svg> viewBox属性を使用するには?

    質問 svgを公式ドキュメントで勉強しているのですが、そのような行があります。私はそれがすでに持っている場合、それを得ることはありません。 width と height 属性で指定したのであって viewBox="0 0 1500 1000" ? 1px単位は1ユーザ単位に等しいと定義されています。従って、"5px" の長さは、公式ドキュメントにある "5"" の長さと同じで、こ

    2023-06-11 18:11:19
  • [解決済み] SVGで矩形を中心軸に回転させる

    質問 次のようなコードがあります。 &lt;svg&gt; &lt;defs&gt; &lt;rect id = "myRect" x = "10" y = "10" height = "120" width = "120" stroke-width = "2px" stroke = "red" fill

    2023-06-07 02:31:21
  • [解決済み] SVGで中空円を描画する

    質問 SVGで中空円を描く方法がよくわかりません。 色で塗りつぶした後、黒い輪郭を持つリング形状が欲しいです。 私がそれを行うことについて考えた方法は、2つの円を持っていて、一方は他方よりも半径が小さくなっています。問題は、それらを塗りつぶすとき、どのように小さい円は、それが座っているものと同じ塗りつぶしの色を取るようにするのでしょうか? どのように解決するのですか? 単に

    2023-05-25 11:47:27
  • [解決済み] SVGドキュメントはカスタムdata-属性をサポートしていますか?

    質問 HTML5 では、要素に任意のメタデータを XML 属性に格納することができ、その名前は data- のような &lt;p data-myid="123456"&gt; . これもSVGの仕様の一部なのでしょうか? 実際には、このテクニックは多くの場所で SVG ドキュメントに対してうまく機能します。 しかし、私はこれが公式の SVG 仕様の一部であるかどうかを知りたいので

    2023-03-16 15:14:29
  • [解決済み] svgコードを.svg画像として保存するにはどうすればよいですか?[クローズド]

    質問 ここで何が聞かれているのかを知ることは困難です。この質問は曖昧、漠然、不完全、過度に広い、または修辞的であり、現在の形式では合理的に回答することができません。この質問を明確にし、再開できるようにするための支援を求めています。 ヘルプセンターをご覧ください。 .

    2022-12-05 08:21:28
  • [解決済み] テキストの横にアイコンを表示する最も堅牢な方法 [終了しました]。

    質問 終了しました。 この質問は Stack Overflow ガイドライン . 現在、回答を受け付けていません。 この質問を改善したいですか? 質問を更新して、それが オントピック になるように更新します。

    2022-11-20 08:31:19
  • [解決済み] enable-background属性は、具体的に何をするのですか?

    質問 の部分は具体的にどのようなものなのでしょうか? enable-background 属性は何をするのでしょうか? を読むと 仕様 を読みましたが、まだ理解できていません。 どのように解決するのですか? 背景画像を指定した要素の子要素で利用できるようにするもので、コンテンツと背景をブレンドするフィルタ効果のようなものに利用されます。他にも使い道があるかもしれませんが

    2022-10-15 17:14:13
  • [解決済み] SVGでtransformの原点を設定する方法

    質問 javascriptを使用してSVGドキュメントの特定の要素のサイズを変更したり、回転させたりする必要があります。問題は、デフォルトで、それは常にで原点を中心に変換を適用することです。 (0, 0) - の左上を原点とした変換を適用することです。 このトランスフォームアンカーポイントを再定義するにはどうしたらよいでしょうか。 私は transform-origin 属性を

    2022-09-01 16:55:27
  • [解決済み] SVGのストローク幅を固定化

    質問 私は、SVG 要素のストローク幅を "ピクセル認識" に設定できるようにしたいと思っています。SVG の要点はピクセルに依存しないことであるため、これが不可能である可能性があることを私は知っています。 コンテキストは次のとおりです。 私は、viewBoxとpreserveAspectRatio属性が設定されたSVG要素を持っています。それは次のように見えます &lt;svg

    2022-08-09 07:20:09
  • [解決済み] SVGユースタグとReactJS

    質問 シンプルなスタイリングを必要とするSVGアイコンのほとんどを含めるために、通常はそうしています。 &lt;svg&gt; &lt;use xlink:href="/svg/svg-sprite#my-icon" /&gt; &lt;/svg&gt; 最近、私はReactJSを私の新しいフロントエンド開発スタックの可能なコンポーネントとして評価して遊んでいます。 use

    2022-07-03 10:38:02
  • [解決済み] svgのx属性とdx属性の違いは何ですか?

    質問 svgのxとdx属性(またはyとdy)にはどのような違いがありますか?軸のシフト属性 (dx) と位置属性 (x) を使用する適切なタイミングはいつですか? 例えば、私は多くのd3例が次のようなことを行っていることに気づきました。 chart.append("text") .attr("x", 0) .attr("y", 0) .attr("dy", -3)

    2022-05-17 21:32:39
  • [解決済み] SVG における text 要素の垂直アライメント

    質問 SVGファイルがあるとします。 &lt;svg width="1024" height="768" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"&gt; &lt;text x='20' y='60' style="font-size: 60px"&gt;b&lt;/t

    2022-05-10 11:23:04
  • [解決済み] SVGの円弧パスによる円形描画

    質問 短い質問:SVGパスを使用して、99.99%の円を描けば表示されますが、99.99999999%の円を描くと、円が表示されなくなります。どうしたら直るのでしょうか? 以下のSVGパスは、99.99%の円を描くことができます: (試しに http://jsfiddle.net/DFhUF/1381/ で、4つの円弧が見えるか、2つの円弧だけが見えるか見てください。ただし、IE

    2022-04-26 16:35:01
  • [解決済み] SVG ルート要素のデフォルトの背景色

    質問 SVGドキュメント全体のデフォルトの背景色を、例えば赤に設定したいのですが、可能でしょうか? &lt;svg viewBox="0 0 500 600" style="background: red"&gt;/* content */&lt;/svg&gt; 上記の解決策は機能しますが、style 属性の background プロパティは残念ながら標準的なものではありません。

    2022-04-23 04:59:23
  • [解決済み】SVGファイル内のtransformを削除する方法

    質問 しばらく悩んでいるのですが、どこにも(うまくいく)答えが見つからないようです。私は以下のようなSVGファイルを持っています。 &lt;svg xmlns:dc="http://purl.org/dc/elements/1.1/" ... width="72.9375" height="58.21875" ...&gt; ... &lt;g

    2022-04-13 23:10:23