SVG

SVGは、XMLを基盤とした2Dベクター画像記述言語。画像を線・面といった図形の集合体として扱うベクター画像のため、環境に適した表示が可能です。アニメーション機能もサポートされており、簡単なインタラクティブコンテンツ作成もできます。

RSS
  • 受付中

    回答
    0

    オブジェクトの属性変更が画面に反映されない。(オブジェクトのリフレッシュ)

    当方の解決していない質問の中の、フロントにフォーカスした質問です。 情報が足りないようでしたらController,Model等もコード追加します。 部屋番号というタブがありまして、タブをクリックするごとに部屋に入っているオブジェクトの属性(内容)を切り替え、マウスオーバーでツールチップ表示したい。という仕様です。 タブクリックするごとにオブジェクトの情

    • 0評価
    • 91PV
    teratailが1週間前に アップデート
  • 受付中

    回答
    0

    SVG内のcontenteditableが効かない

    前提・実現したいこと 厳密にはcontenteditableが効かないわけではなく、「フォーカスが合わない」という問題が発生しています。 今、下記のようなSVGを描画させるhtmlファイルがあります。 normal.html <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta

    • 0評価
    • 52PV
    teratailが1週間前に アップデート
  • 受付中

    回答
    1

    snap svgで座標系を変えたい

    a aa a a a a a a a a

    • -3評価
    • 59PV
    body body 3週間前に 質問を編集
  • 解決済

    回答
    1

    SVGを使用したアニメーション

    実現したいこと Illustratorで書き出したSVGを使ってアニメーションを作成したいです。 最終的には文字を手書き風に書き出したいです。 発生している問題 ↓Illustratorで作ったSVG 左上から右下にかけてパスを通しています。このパス通りにアニメーションして欲しいです。 Illustratorの線幅ツールを使って線を太くしています。

    • 0評価
    • 69PV
    nyako_prog nyako_prog 4週間前に コメント
  • 受付中

    回答
    0

    svg上にリストボックスを実装したい

    HTMLにsvgを埋め込み、要素(rect)をクリックするとリストボックスを出す svg要素で作成したリストボックスとボタン やってみたこと svgタグ内に直接selectタグを入れてみた。→svg内でselectタグに対応しておらずsvg画像が壊れた。※クリックイベントは実装済み 次にやるとしたら リストボックスに見えているsvg要素内に別レ

    • 0評価
    • 85PV
    sanezane sanezane 1ヶ月前に 質問を編集
  • 受付中

    回答
    0

    mermaid.jsで作成したSVGをinkscapeで開くと表示内容が異なる

    blockdiagや plantumlからmermaid.jsに移行を検討しているのですが、 mermaid.jsで作成したSVGをinkscapeで開くとファイルの中に独自のタグが設定されているためか、 開いた際に、レイアウトが大きく変換されてしまいます。 mermaid.jsで作成したSVGをinkscapeに対応した形式に変換はできないのでしょ

    • 0評価
    • 47PV
    teratailが1ヶ月前に アップデート
  • 受付中

    回答
    0

    SVG画像が表示されない

    ホームページでよくある、「上へ戻る」ボタンをJqueryを使い表示させています。 そのボタンをsvgで作り直したところ、表示されなくなりました。 jQuery(function() { jQuery('#areaPagetop').hide(); jQuery(window).scroll(function() { if(

    • 0評価
    • 84PV
    teratailが1ヶ月前に アップデート
  • 解決済

    回答
    1

    IE11では表示されるsvg背景。Chrome、firefoxでは表示されません。

    アイコンを背景画像svgで表示したいです。 IE11では表示されたのですが、Chrome、firefoxでは真っ白でした。 [html] <ul class="btnlist"> <li><a href="#" class="btn_fav hover"><i class="img_svg"></i>お気に入り</a></li> <l

    • 0評価
    • 114PV
    mts10806 mts10806 1ヶ月前に コメント
  • 受付中

    回答
    3

    子要素のidをエディタを使い親要素へ置換できるか

    現状 svg要素の親子関係にあるタグ内で子にもたせるべきidを親に持たせてしまい、何かしらの処理で【親のid→子のid】へ移動させたい。 親→<g>要素 子→<rect>要素 なぜやる必要があるのか 要素を取得しfill(色)をDOM操作したいときに<g>要素ではfillが効かない 考えていたこと エディタ(サクラエディタ)を使い置換しようとこ

    • -1評価
    • 110PV
    sanezane sanezane 1ヶ月前に 質問を編集
  • 受付中

    回答
    0

    svgアニメーションを画面に表示されたタイミングで実行したい

    今回初めてsvgアニメーションに挑戦しています。 やりたい事は01~05のセクションごとにポイントとなるsvgアニメーションを設置し スクロールでセクションが画面に表示されたタイミングでsvgアニメーションを実行したいです。 以下コードになります。 <!DOCTYPE html> <html> <head> <meta charset="ut

    • 0評価
    • 91PV
    teratailが1ヶ月前に アップデート
  • 解決済

    回答
    1

    svgでクリックイベントが効かない

    やりたいこと svg要素を画面上でクリックした際にクリックイベントを発火させたい。 現状コード $(window).on('load', function () { var classname = document.getElementsByClassName('hoge').contentDocument;

    • 0評価
    • 85PV
    sanezane sanezane 1ヶ月前に 質問を編集
  • 受付中

    回答
    0

    inkscapeでsvgファイルが表示されない

    現状 inkscapeで作成したsvgファイルを保存して再び開いたところ作成した半分以上が消えてしまいました。 しかし、htmlにsvgタグとして埋め込んで実行したところ表示されました。 inkscape上で消えたオブジェクトについては、テキストエディタで見たところ生きています。 ドローソフトなどとは縁のない仕事でしたので、inkscapeの使い方について

    • 0評価
    • 386PV
    teratailが1ヶ月前に アップデート
  • 解決済

    回答
    2

    引数に指定された数だけ要素を複製したい

    やりたいこと 引数に指定された数だけ同じ図形を複製する関数を作成したい。 この前段階でクリックして1つずつ増やす関数を作成し動作確認済みです。 for文を追加したところイベントが反応しなくなってしまいました。 コンソールにもなんにも出ず、解析の仕方がわかりません。 どこに問題があるのでしょうか、解析の仕方と合わせてご教授いただきますと幸いです。 va

    • 0評価
    • 88PV
    sanezane sanezane 1ヶ月前に コメント
  • 解決済

    回答
    1

    Image Magick を使って、SVG -> PNGに変換するときの日本語の文字化けについて

    Image Magick を使って、SVG -> PNGに変換する際に、日本語部分が文字化けしてしまうのですが、なにか解決策はありますでしょうか? styleで、font-familyを指定すると文字化けが直るという記事をどこかで見かけて、試してみましたが、文字化けは解消しませんでした。 環境 macOS High Sierra 10.13.4 Ima

    • 1評価
    • 168PV
    yassyskywalker yassyskywalker 1ヶ月前に ベストアンサー
  • 解決済

    回答
    1

    json形式のデータを取得しデータに合わせてsvgの色を編集したい

    実現性のサンプルを作成中です。 実現のイメージはあるのですが製造未経験のため引き出しが皆無です。 ご協力をお願いします。 OS:windows7 開発環境:visualstudio2017 言語:c# フレームワーク:asp.net MVC Framework DB:Postgresql やりたいことと実現イメージ ajax処理。 データベースに定義さ

    • 0評価
    • 286PV
    sanezane sanezane 1ヶ月前に ベストアンサー
  • 解決済

    回答
    1

    SVGで描画した円をhoverで拡大したい

    やりたいこと circleをhoverしたとき、円の位置はそのままで拡大したいのですがどう記述したらよろしいでしょうか。 発生している問題 hoverすると斜め右下で円がぶれて拡大されます。 問題のソースコード SVGで描画した円にクラスを付け、そのクラスに transform: scale(2); を指定しています。 <!DOCTYPE ht

    • 0評価
    • 374PV
    a_a a_a 1ヶ月前に ベストアンサー
  • 解決済

    回答
    1

    画面レイアウトについて(余白)

    やりたいこと <p>タグ「No.1の内容」(キャプチャ)と<div svg>の間の余白をなくしたい。 試したこと margin-top:4,padding:0を設定したが変わらず svgはInkscapeにて作成しました。ページサイズは[ページサイズをオブジェクトに合わせる]を選択したのでピッタリできていると思います。 デザインビギナーのた

    • -1評価
    • 93PV
    sanezane sanezane 1ヶ月前に 回答
  • 解決済

    回答
    1

    HTMLでのsvg要素のエリア設定について

    困っていること・現状 svg要素のサイズをhtmlの中で指定しているのですが、画面をブラウザで表示し検証すると横幅いっぱいにマウスオーバーcssが効いている。そのためsvgの絵の外でマウスオーバーした場合でも画面が赤くなってしまう。 やりたいこと svgの絵の大きさでマウスオーバーでの色の変化を実現したい。 試したこと ・<div class

    • 0評価
    • 96PV
    Ryokusitai Ryokusitai 2ヶ月前に 回答を編集
  • 解決済

    回答
    1

    svgクリック時にページを遷移させたい(get)

    仕様とやりたいこと asp.net C# でのWebアプリ 画面内の絵(画像)をhtml内にsvg属性で記入することで表現しています。 その絵をクリックすることでページを遷移させたい(getアクション)と考えています。 <svg class="クラス"> <rect data-name="絵" id="rect815"

    • 0評価
    • 251PV
    sanezane sanezane 2ヶ月前に ベストアンサー
  • 受付中

    回答
    1

    WEB上でデザインした商品をそのまま購入できるようにしたい

    前提・実現したいこと 自分だけのオリジナルTシャツが作れる 以下のようなサイトを作ろうとしています。 https://tmix.jp/ WEB上で商品のデザインができる デザインした商品はイメージ化してカート(セッション)に保存することができる カート(セッション)に保存した商品はそのまま購入することができる といった主要機能から取り掛

    • 0評価
    • 126PV
    mts10806 mts10806 2ヶ月前に コメント
1

タグ情報

  • あなたの順位

    -

  • タグ登録者数

    32

  • 総質問数

    81

  • 今週の質問数

    0

関連するタグ

SVGタグのよく見られている質問

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る