[svg] タグが付いた質問
24
質問
6
票
2回答
5,568 件の閲覧数
複数の点をベジェ曲線でなめらかに結ぶための制御点座標を算出したい
プログラム経由でベクター画像(SVGファイル)を生成しようとしています。
書き出す図形はやや歪んだ円形で、関数に任意の角度を渡すと中心からの距離が得られます。
現状は角度を1度ずつ変化させて点を直線で結んでいるのですが少しガタガタしてしまうのが気になります。
そこでベジェ曲線でうまく繋いで点の数を減らそうと思っています。...
6
票
1回答
1,110 件の閲覧数
IEにおいて、SVGをHTML内に直接記述した場合、他のブラウザと大きさが異なる
IE11において、以下のようにHTML内に直接記述したSVGのスケーリングが、他のブラウザと異なります。
#svg {
width: 80%;
background-color: #DDD;
}
<svg viewBox="0 0 430 330" id="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink=...
4
票
2回答
423 件の閲覧数
SVGの、circle中心に伸びるpathのmarker-endの調整方法
半径が点の範疇以上に指定されている円があり、Pathをその縁の中心を目的地にしています。
例えば、次のようなSVGを描きました。
<svg width="600px" height="400px" xmlns="http://www.w3.org/2000/svg" version="1.1">
<!-- ////////////////////////////...
3
票
1回答
1,192 件の閲覧数
SVG 要素をJavascriptのmousemoveイベントとsetIntervalとの組み合わせ
Javascriptとsvgの勉強として以下のコードを作成してみました。
1週間程かけてsvgの仕組み,JavascriptのaddEventListener,jQueryのイベント関連関数など色々試してみましたが一番スムーズに動いたソースを張り付けておきます。
以下のリンクで確認できます。
エラーは出ませんがマウスを動かさないと中央部分がランダムに動かない
$(document)....
3
票
1回答
154 件の閲覧数
SVGでwindowsformアプリケーションのリストボックス等を作るには?
現在作っているWebサイトで大きなsvg画像を表示するページがあります。
(htmlにインラインsvgを埋め込んでいます。)
そのページのsvgタグ内に、windowsformアプリケーションのオブジェクト(例:リストボックス、コンボボックス等)を作成することは可能でしょうか?
svgでオブジェクトを作ることが難しい場合は、svgタグ内にオブジェクトを追加する方法でもかまいません。
...
3
票
2回答
1,020 件の閲覧数
SVGのPATH要素を、JavaScriptでPOST送信すると、受信内容が[object SVGPathElement]となる
やりたいこと
SVGのPATH要素を、JavaScriptでPOST送信
PHPでPOST受信して利用
送信したいPATH要素
<path d=" … 中略 … "></path>
現状
■JavaScript での送信内容
フォーム動的生成
input 要素に、path 要素を格納した target を追加
elem.setAttribute('value', ...
2
票
4回答
9,418 件の閲覧数
IE10, 11でblur効果
IE10、11でもblur効果、またはそれに近い効果を適用することは可能でしょうか?
できれば、png画像は使いたくありません。
css filterやsvg、Javascript等で実装できる方法をご存知の方
ご教授ください。
1
票
1回答
5,228 件の閲覧数
SVGでフォントを埋め込むことはできますか?
SVGにフォントを埋め込むことはできますか?
SVGにフォントを埋め込んで、そのSVGを<body>のbackground-imageにしたいです
このようなことはできるのでしょうか?
1
票
1回答
125 件の閲覧数
jupyter lab上でOctaveで出力画像をsvgではなくpngにする方法はありますか?
jupyter lab上でOctaveでグラフを描画すると自分の環境ではsvg画像が出力されてしまうのですが、これをpngやjpg等が出力されるようにする方法はありますか?
サンプル数が10^6のオーダーなのでベクター画像であるsvgで描画してしまうと非常に重くて困ってます。
使用言語はOctaveで、カーネルもIOctaveです
OSはMacOSです
ライブラリはデフォルトから追加してません
...
1
票
1回答
130 件の閲覧数
forceレイアウトのノードのリンクに飛ぶことができない
<!DOCTYPE html>
<html lang="ja">
<style>
svg{
border:solid 1px;
}
</style>
<head>
<meta charset="utf-8">
<title>D3.js(Force Layout)の練習</...
1
票
1回答
427 件の閲覧数
D3で円グラフをajaxでテキストファイルをよみこんで表示
テキストに$data=$_POST["item"].",".$_POST["tanka"].",".$_POST["zaiko"]."¥n";と保存できるようにしました。
この在庫の円グラフを作る際に2点わかりません。
1.円グラフのパラメーターにテキストファイルの目的のデータをどうおとすか。
2.円グラフの中心がうまく設定できません。
<!DOCTYPE html>
<...
1
票
1回答
83 件の閲覧数
マテリアルアイコンはSVGで作成する際には何×何pixelが妥当ですか?
WEBアプリに使用するマテリアルアイコンを作成したいのですが、以下リンク先のアイコンのSVGをみるとHTML用のインラインSVGが24×24pixelで作成されています。
Material Design Icons
<svg style="width:24px;height:24px" viewBox="0 0 24 24">
...
1
票
0回答
346 件の閲覧数
SVGで、大きさが分からない(?)「pathタグの集まり」を、指定要素一杯に表示させるには?
下記SVGタグ(抜粋)があるのですが、これを指定要素(高さ400px、横幅250px)一杯に表示させるためには、どうすれば良いでしょうか?
・viewBoxを指定するためには、pathタグ全体の大きさを知る必要がある?
・それはどこから判断???
<svg viewBox="0 0 ? ?">
<path d="M 500a 10,20 … " transform="...
0
票
3回答
223 件の閲覧数
線分(1次ベジェ曲線)を説明する式で、[]が付与されている理由と縦に並んでいる理由は?
Link先で、下記式が掲載されているのですが、意味が分かりません。
Q
・これは座標ですか?
・どうして[]で囲っているのでしょうか?
・どうして縦に並べているのでしょうか? X,Yのように横に並んでいない理由は?
・これが、バーンスタイン基底関数ですか?
・それとも、二項係数??
0
票
2回答
280 件の閲覧数
jsで挿入したhtmlの<polygon>要素が表示されない
htmlにあらかじめ書かれている、要素は表示されるのに、
jsで追加した要素は表示されません。
ブラウザのデベロッパーツール上では同じような表記になっているようなのですが。
[HTML]
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title&...
0
票
1回答
152 件の閲覧数
<!ENTITY ns_flows “http://ns.adobe.com/Flows/1.0/”><!ENTITY ns_extend “http://ns.adobe.com/Extensibility/1.0/”>
HTMLへSVGファイルを読み込んでいるのですが、
・下記だと表示されて、
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
<!ENTITY ns_flows "http://ns.adobe.com/Flows/1.0/"&...
0
票
1回答
203 件の閲覧数
canvasへ描画した内容をSVGのパスデータへ変換して、パターン適用させることは出来ますか?
canvasへ描画した内容をSVGのパスデータへ変換して、SVGのパターンを適用させてみたいのですが、そもそも、canvasへ描画した内容をSVGのパスデータへ変換することは出来ますか?
検索してみたら下記ページが見つかったのですが、ここで記載されている内容は、canvasへ描画した内容をSVGへ取り込んでいるだけでSVGのパスデータへ変換しているわけではないのですか?
...
0
票
1回答
218 件の閲覧数
cssのsvgに対する優先順位について
次のリンクからhtml5版プレイヤーに移動した後の、設定ボタンの色を変えようとしています。
http://www.nicovideo.jp/watch/sm8628149
cssで言うとここです
→<button class="ActionButton ControllerButton PlayerOptionButton"~~>
そこで、stylishにて
....
0
票
1回答
107 件の閲覧数
ChromeでSMILをサポートしますか?
Chome45でSMILを非推奨したと知っています。
しかし,最新Chomeでうまく動作し,Consoleでも警告がなくなったようです。
Caniuse(https://caniuse.com/#feat=svg-smil) にも支援していることで表示します。
SVGのSMIL志願するんですか?
0
票
1回答
232 件の閲覧数
インラインSVGでレーダーチャートを表示したい
以下のコードをhtmlファイルに入れていますがレーダーチャートが表示されません。原因がわかる方教えていただけませんでしょうか。
コードの出典: ”インラインSVG”を使ってレーダーチャートを作ってみよう! -- キャスレー技術ブログ
<head>
<style>
#svg_container{
width:600px;
height:450px;
...
0
票
1回答
42 件の閲覧数
javascriptのオブジェクトにsvgを文字列で格納してhtmlに追加する方法
htmlに外部ファイルからsvgを読み込みたくて、jsファイルのオブジェクトに文字列としてsvgを格納してhtmlに追加する方法を考えたのですが、上手く動作しません。body直下にsvgを置いているので上部に空白出来るはずなのですが、出来ないです。
見ていただけないでしょうか?
index.html
<!DOCTYPE html>
<html lang="ja"...
0
票
0回答
77 件の閲覧数
フリーハンド描画実装に関する canvas と svg の違いは?
フリーハンド描画実装に関して、 canvas と svg の違いはありますか?
それぞれ長所と短所があれば知りたいです。
質問経緯
Webブラウザで動作するフリーハンド描画ツールを作成しようと思い、色々調べています。
当初はcanvasでしか作成できないと思っていたのですが、 svg で作成している人もいることに気が付きました。
両者を比較した上で何れかを選択したいのですが、...
0
票
1回答
77 件の閲覧数
box-shadowのblur-radiusからSVGのstdDeviationへの変換
box-shadow: 0 0 20px #000;
たとえば、CSSで作った影をと同じものをSVGで作るとき、
<svg width="100px" height="100px">
<filter id="shadow" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur in="...
-2
票
1回答
503 件の閲覧数
イラストレーターでSVGに書き出したベジェ曲線を、HTML内で使える形式に変換したい
お世話になります。
HTMLの<svg>要素の中の<path>と、イラレで書き出したSVGファイルに含まれる<path>では、ベジェ曲線の書き方が若干違うようで、それを書き換える必要があるようです。
イラストレーターで描き、SVGに書き出したベジェ曲線を、HTML中のSVGで使えるpath要素に簡単に変換できるツールなどありませんか?
または、...