4
票
承認済み
<div width="100%"></div>内で、できるだけ大きくSVG表示したい時のviewBox属性の設定は?
viewBox は SVG の座標系の中でどの部分を見せるかを指定するもので、静止画ならたいてい固定の値を書きます。デフォルトのサイズや縦横比に影響はありますが、HTMLページ中の表示される大きさを変更するためのものであはりません。
HTMLページ中での大きさを指定するのは <img> と大体同じで、width 属性、height 属性、width CSS プロパティ、height ...
4
票
承認済み
SVGでフォントを埋め込むことはできますか?
ほぼ同じ質問が英語でありました。2つやり方があって、CSS<style>タグでフォントファイルをbase64にしてdata URIを埋め込む方法と、<font>タグで自前のフォントをパスで指定する方法です。@rio.irikami さんがコメントで書かれた様にpathとして足す場合、2つ目のやり方にすれば最初面倒臭いですがあとからの編集は楽です。
...
3
票
承認済み
<!ENTITY ns_flows "http://ns.adobe.com/Flows/1.0/"><!ENTITY ns_extend "http://ns.adobe.com/Extensibility/1.0/">
<svg 以降の中身が書いてないので推量になりますが、<!ENTITY ...> は実体宣言です。1つ目の !ENTITY は実体参照 &ns_flows; で呼び出す内容を定義していて、実体宣言なしで実体参照が使われるとエラーとなります。
2
票
承認済み
線分(1次ベジェ曲線)を説明する式で、[]が付与されている理由と縦に並んでいる理由は?
・これは座標ですか?
はい。二次元座標を表しています。
・どうして[]で囲っているのでしょうか?
・どうして縦に並べているのでしょうか? X,Yのように横に並んでいない理由は?
ベクトルには横ベクトルと縦ベクトルという2つの表し方があります。
ベクトルも行列だと思うと、(1×2)行列か(2×1)行列かの違いです。
ベクトルを横にするか縦にするかは流儀によって異なります。
...
2
票
線分(1次ベジェ曲線)を説明する式で、[]が付与されている理由と縦に並んでいる理由は?
リンク先で言うP0, P1は、いわゆるベクトルです。
点(座標)Pをベクトルで表して
原点Oから点P0へのベクトル
→
OP0を略して
→ →
P0,P1
→を略して
P0,P1と言ってます。
線分
__
P0P1をP0からP1へのベクトルとすると、
→
P0P1は、
ベクトルP1-ベクトルP0
P1 - P0で、
中間の点は
(基点とするベクトルP0)+(P0からP1へのベクトル)×...
2
票
線分(1次ベジェ曲線)を説明する式で、[]が付与されている理由と縦に並んでいる理由は?
・これは座標ですか?
・どうして[]で囲っているのでしょうか?
単純に行列です。1x2行列ですから座標といってもいいです。
・どうして縦に並べているのでしょうか? X,Yのように横に並んでいない理由は?
結局のところ座標を表示したいだけなので、1x2行列でも2x1行列でもよいわけです。
リンク元ページ作者は1x2行列で表記しただけです。
あなたが気に入らないなら1x2でも2x1でも、...
2
票
承認済み
cssのsvgに対する優先順位について
HTMLのXML namespaceがhttp://www.w3.org/1999/xhtmlなのに対し、SVGのXML namespaceはhttp://www.w3.org/2000/svgです。またCSS SelectorにおいてXML namespaceを指定するには|を使います。
@namespace url(http://www.w3.org/1999/xhtml);
@...
2
票
承認済み
canvasへ描画した内容をSVGのパスデータへ変換して、パターン適用させることは出来ますか?
「canvasへ描画した内容をSVGのパスデータへ変換」に関しては、「パス」に変換されるかは不明ですが、この(古い)記事によると以下のようなライブラリがあるようです。
Method to convert HTML5 canvas to SVG?
Fabric.jsというのが、そういう機能(canvasとSVG間の相互変換)を持っているようです。
Fabric.js is a powerful ...
2
票
svgでtextタグ内の一部tspanタグを右寄せ文字にしたい
2つのテキストの区切りの地点を両方のtspanのx=とy=に設定して、数値部分に text-anchor="end"、単位部分に text-anchor="start" を付けるのはいかがでしょうか。
setInterval(() => {
document.getElementById('1').textContent = Math....
2
票
承認済み
SVGからpng変換する際に<use>タグが反映されない
Magick.NETで変換すると、出力されました。
Magick.NET-Q16-AnyCPU
using ImageMagick;
using (var img = new MagickImage("c:/test/test.svg"))
{
img.Write("c:/test/test.png", MagickFormat.Png);
}
2
票
承認済み
WebでSVGを取り扱う際、SVGタグデータをデータベースへ保存した方がよいか、あるいはSVGファイルとして保存した方がよいか
SVG に限った話ではありませんが、懸念している内容は「SQL アンチパターン」「ファントムファイル」辺りで調べてもらうと解説記事が出てきます。(SQL アンチパターンが書籍名になります)
かいつまんで抜き出してみると…
ファイルパスを保存するパターン
「DB のレコード」もしくは「実際のファイル」どちらか一方のみが削除されて整合性が保たれない可能性がある (孤児のファイル = ...
2
票
WebでSVGを取り扱う際、SVGタグデータをデータベースへ保存した方がよいか、あるいはSVGファイルとして保存した方がよいか
SVGかどうかに関係なく一般的な判断として
データベースと無関係に更新されるなら、データベースに含めるべきでない
データベースと連動して更新されるなら、データベースに含めるべきである
だけかと。SVGはXML形式ですし、MySQLにはXML関数が用意されているため、必要に応じてSVGをMySQL内で更新できるはずです。
ですが、...
1
票
jsで挿入したhtmlの<polygon>要素が表示されない
イラストレーターでSVGに書き出したベジェ曲線を、HTML内で使える形式に変換したいと全く同じです。<svg>ではHTML名前空間に作られたタグに過ぎず、SVG画像であるとは認識されません。
名前空間の速修講座などを参考に修正する必要があります。jQueryを使用するのであれば、対応する記述が必要です。
1
票
承認済み
HTMLに組み込まれていたSVGタグを画像へ変換したいのですが、正常変換されません。HTMLに組み込まれていたSVGタグは普通のSVGとは異なる?
「SVGタグを画像変換」とはラスタライズしたいという意味でしょうか?
HTMLに組み込まれているSVGタグは、いわゆる普通のSVG画像と何が異なるのですか?
異なることはないと思います
以下は適当に変更したので, もっとわかりやすい方法あるかもだけど
viewBox 高さ少し変更
height 少し変更
colabでセルマジック指定した描画で確認
%%svg
<svg id=&...
1
票
Python3とBeatifulSoup4を使ってhtmlからsvgを抜き取りました。svg画像としてExcelへ貼り付けるため、svgファイルとして保存する方法を教えてください。
以下は, デスクトップに temp.svg という名前で保存する場合
(デスクトップフォルダーの名前を Desktopと仮定 (名前変えてなければ大丈夫のはず))
from bs4 import BeautifulSoup
from pathlib import Path
soup = BeautifulSoup(text, 'html.parser')
svgs = soup('svg')
...
1
票
承認済み
SVG の線の長さと同じ値はどうやって探すんですか?
指定する値は, SVG内の pathの長さ以上であればよいので 必ずしも同じでなくても構わないはず
デバッガーにその手の情報の取得が可能か不明だったので, 以下のようにして取得
JavaScriptから SVG参照できるように用意し, 実行することで, pathの長さが判明します
(実行前に, SVG 要素に id="pls"属性追加し(ここでは適当な名前), ...
1
票
承認済み
CSSで、ドキュメントルートより上に配置しているSVGタグそのものを読み込む方法はありますか?
質問文の2番目の方法が実現できます。
質問文の様なhoge.phpが存在するとして、ヘッダにContent-typeを適切にセットすればphpファイルも画像扱いになります。
すなわち、
<?php
header("Content-type: image/svg+xml");
?>
<svg height="" viewBox="...
1
票
承認済み
ChromeでSMILをサポートしますか?
今は "deprecation" にするのは "suspended" (保留?/一時停止?) 状態のようですね。
以下の Issue が出ていて、
SVG SMIL Chrome deprecation is "suspended" since 2016-08-17 #4167
MDN にも注釈があります。
SVG animation with SMIL
1
票
承認済み
jupyter lab上でOctaveで出力画像をsvgではなくpngにする方法はありますか?
octave_kernel のサンプル notebook によると、%plot --format png のようにして出力形式を指定できるようです。以下は小さい動作例です。
%plot --format png
plot([])
私の環境ではこれで svg / png / jpeg を切り替えることができました (Windows 10 + Jupyter 4.4.0 + ...
1
票
インラインSVGでレーダーチャートを表示したい
根本的な原因は、JavaScript の関数を定義しているものの、それがいつ実行されるのかを書いていないことにあります。やりたいことに応じて、たとえば window.onload イベントを使うなどの解決法がありますので、詳しくは JavaScript のチュートリアルをご覧ください。引用元の記事では、DOM のロードが終わった後に描画させています (jQuery を使っています)。
//...
1
票
承認済み
SVGの、circle中心に伸びるpathのmarker-endの調整方法
本件、色々調べ方法が見つからず、また海外版(本家)のStackOverflowで問い合わせたところ、「No way」手段は無いよ、という回答に至りました。
結果、Javascriptを介入させ、Javascriptによって制御を行う、という形を取りました。
var paths = new Array();
var autonext = -1;
var draw = function(...
1
票
SVGでwindowsformアプリケーションのリストボックス等を作るには?
昔の質問ですが、同じ疑問でたどり着いた方のために回答しておきます。
foreignObjectを調べてみてください。
無効化に投票
関連するタグ
svg × 34html × 13
javascript × 9
css × 7
html5-canvas × 3
jquery × 2
python × 1
php × 1
python3 × 1
c# × 1
mysql × 1
jupyter-notebook × 1
pdf × 1
beautifulsoup × 1
internet-explorer × 1
octave × 1