【XML】SVGってどうなの2【DOM】

1Name_Not_Found2006/08/11(金) 12:30:46ID:0ktWc2zc
前スレ落ちたので、あまり要らないと思うけど立てました。

Web2.0とかAjaxの陰に隠れて全然ブレイクしないSVGですが、
OPERAやFirefoxなどネイティブ実装は着々と進行しています。
むしろAjax+SVG(+XForms)は最強無敵艦隊といえるほどのポテンシャルを
秘めており、これが実現すれば(いやネイティブ実装ブラウザでは
すでに一部実現していると思われ)Flashイラネになるでしょう。

もう一つニュース
キタ━━━━(゚∀゚)━━━━ッ!!
SVGの新バージョン「SVG Tiny 1.2」、W3Cの勧告候補(CR)に
ttp://www.itmedia.co.jp/news/articles/0608/11/news023.html

早い事フルバージョンの1.2もたのみます!

122Name_Not_Found2008/12/09(火) 01:13:06ID:???
ブラウザに表示したSVGを、SVGで保存しても、イラレで読めない orz

123Name_Not_Found2008/12/15(月) 22:54:35ID:iy26OhKu
AdobeのビューワーでSVGを高画質で表示すると色が薄くなるけど、
透明度の低いフィルターでもかけてるのかね?
あの減色を止める方法があれば知りたい(高画質のチェックを外す以外の方法で)。

124Name_Not_Found2008/12/22(月) 13:46:08ID:???
firefoxで、
動的にelemeent作ってrectとかcircle追加した
そのときSetAttribute()でonclick使って関数呼び出ししたいんだけど、うまくいかない・・

↓こんな感じ
element = document.createElementNS("http://www.w3.org/2000/svg","circle"); // element作る
...円のパラメータを色々設定..

element.setAttribute("onclick", 'alert("test-test-test");'); // クリックしたらalert出す
document.getElementById("target-id").appendChild(element); // target-idの次に埋め込む

やってみたら円は追加されて表示されるのにクリックしてもalert出ない・・そういうもんなの?

125Name_Not_Found2008/12/22(月) 19:07:15ID:???
>>124
addEventListener

126Name_Not_Found2008/12/22(月) 20:41:09ID:???
>>125
THX!やってみます

127Name_Not_Found2009/03/24(火) 08:39:39ID:???
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
              "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 420 644">
<path id="miku" fill="black" fill-rule="evenodd" stroke="none"
d="M 144,77 C 111,178 97,220 53,325 12,379 -16,498 43,536 33,519 34,504 34,504 34,504 37,555 83,558 70,534 88,517
88,517 89,601 85,619 102,626 120,627 125,619 125,619 125,619 125,608 125,608 113,585 113,585 113,577 100,561
120,485 120,485 132,472 140,462 139,445 140,461 154,483 161,490 136,444 145,382 152,337 168,337 170,336 173,335
181,355 191,378 203,434 209,454 219,484 229,496 243,521 253,546 260,568 263,584 245,602 251,619 262,630 284,624
285,619 285,619 285,607 285,607 285,607 289,607 289,607 291,600 288,597 288,584 282,577 285,571 283,567 277,558
273,526 260,495 253,482 247,471 241,457 236,413 223,355 212,317 212,317 219,309 221,310 221,310 217,331 219,341
220,349 231,351 232,351 231,371 240,360 239,352 239,352 246,352 246,352 246,369 256,369 252,352 252,352 256,351
256,351 260,365 268,357 263,349 263,349 265,347 265,347 269,355 276,353 270,344 273,343 275,339 275,339 255,244
249,229 249,176 249,176 247,173 247,173 246,163 254,149 251,138 246,123 241,125 237,125 234,122 231,119 231,119
230,114 227,115 227,115 227,115 227,104 227,104 227,104 234,119 243,120 235,111 231,103 231,103 251,87 249,75
253,76 269,154 304,288 309,351 312,445 249,491 303,533 281,513 295,484 299,481 282,516 322,527 311,559 348,502
369,527 398,425 417,336 359,231 318,147 272,71 268,38 248,22 248,22 241,17 241,17 241,17 235,17 235,17 235,17 231,24
231,24 204,14 176,29 173,32 171,30 162,30 162,30 160,41 157,41 156,47 152,51 144,77 144,77Z

128Name_Not_Found2009/03/24(火) 08:41:12ID:???
M 166,108 C 166,108 158,155 159,168 162,156 163,146 164,143 171,135 185,139 196,123 196,123 202,122 202,122 202,122
203,116 203,116 203,116 199,117 199,117 179,112 178,103 178,100 176,105 179,110 184,115 192,118 189,122 189,122
183,124 183,117 178,112 178,112 178,123 178,123 178,123 166,108 166,108Z

M 223,192 C 223,192 209,213 202,218 200,233 223,264 223,264 225,239 223,192 223,192Z

M 223,284 C 223,284 221,284 221,284 221,284 223,288 223,288Z

M 238,22 C 238,22 235,27 235,27 235,27 238,28 238,28Z" />
</svg>

129Name_Not_Found2009/04/08(水) 00:49:12ID:???
ちょっとお知恵拝借

130Name_Not_Found2009/04/08(水) 00:55:46ID:???
ぐは、間違って送信ボタンを押してしまった・・・。

最近、日本語テキストが表示されたりされなかったりする現象に
困ってるんですが、何か情報無いですかね?

会社で試したところでは、
XPpro 64bit + IE6 sp2 + Adobe Viewer 3.03 → OK
XPpro 32bit + IE6 sp3 + Adobe Viewer 3.03 → 何も表示されない(エラーも出ない)
2Kpro + IE6 sp2 + Adobe Viewer 3.03 → OK

だったのでIEのsp3が原因かと思ったのですが、家の
XP home 32bit + IE6 sp3 + Adobe viewerでは表示されました。
何がいけないんでしょうかね?

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300"
xmlns:xlink="http://www.w3.org/1999/xlink">
<text x="100" y="100" stroke="#000000" stroke-width="1" font-size="16" font-family="MS-Mincho">美乳</text>
</svg>

131Name_Not_Found2009/05/21(木) 21:29:37ID:9gvVR7+b
IE7,8に対応したSVGビューアってありますか?

132Name_Not_Found2009/09/29(火) 05:01:51ID:???
svgはいいけどさ、
canvasだと、拡張子はどうなるんだろう。
あとjson形式でベクター決めるのかな

133Name_Not_Found2009/10/25(日) 10:58:57ID:WE50mUFi
Safari 4でfilterが効かなくなった?
昔のバージョンでは効いてたのに。

もしかしてGPUがハイスペックなマシンじゃないと効かないとかいう罠ですか?

134Name_Not_Found2009/11/18(水) 21:44:54ID:IGXj1yYW
おもしろいわ
http://fula.jp/cgi-bin/hinomaru/

日の丸

135Name_Not_Found2012/07/01(日) 00:14:37.80ID:???
lineのstroke-width="1"で線を引くと若干太い気がするのですが
もっと細くできませんか?CSSのborderくらいに

136Name_Not_Found2012/08/30(木) 00:29:49.92ID:???
SVG2の公開ドラフト初版が出てるね

SVG Tiny1.2勧告が無かったことにされててヒドス
フルバージョンのSVG1.2は廃案になってるから道連れに消されたのかw

137Name_Not_Found2012/09/15(土) 21:18:23.49ID:???
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね 
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね 
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね
創価死ね

138Name_Not_Found2013/02/08(金) 12:30:13.60ID:???
ブラウザ指定でWebアプリ作るときは使い放題
スマートフォン向けとか

139Name_Not_Found2013/10/23(水) 02:45:52.59ID:l3ipn6HK
SVGを覚えたいのですがSVG2の策定が進んでいるようなので気になっています
どの程度までの基礎知識が共通なのでしょうか?

140Name_Not_Found2013/10/23(水) 13:51:27.72ID:???
基本的には上位互換の拡張だから
大半の知識はSVG2でもそのまま通用する
SVG2で廃止された機能も若干あるが

IDL は記述言語が詳細度が高いものに変更されたので
スクリプトであれこれしたいときはSVG2を見た方がいい場合もある

141Name_Not_Found2013/10/24(木) 08:59:24.96ID:???
edgeでまたもやadobeにやられましたw

142Name_Not_Found2014/10/31(金) 17:15:49.85ID:???
snap.svgってどうなの

143Name_Not_Found2015/03/04(水) 10:49:04.05ID:???
svgはfaviconとかにも向いてると思うけど
Firefoxで最初に表示されるのに、数ページ見てる内にFaviconが消えるんだよね
ChromeではFaviconは無理みたいだな

144Name_Not_Found2015/05/16(土) 14:06:18.89ID:???
age

145Name_Not_Found2015/09/22(火) 02:25:14.19ID:A/iMrMyl
<svg width=800 height=800 viewBox="0 0 903 903"><desc>animMotion</desc>
<path d="M400,250 C391,51 109,51 100,250 109,449 391,449 400,250" fill=none stroke=blue stroke-width=2 id=path1 />
<path d="M500,250 900,250" fill=none stroke=none stroke-width=2 id=path2 />
<path d="M250,500 250,900" fill=none stroke=none stroke-width=2 id=path3 />
<path d="M500,250 C540,51 560,51 600,250 640,449 660,449 700,250 C740,51 760,51 800,250 840,449 860,449 900,250" fill=none stroke=blue stroke-width=2 />
<path d="M400,500 Q400,520 250,550 C49,590 49,610 250,650 451,690 451,710 250,750 C49,790 49,810 250,850 Q400,880 400,900" fill=none stroke=blue stroke-width=2 />
<path d="M -2,0 L 3,0 z" fill=red stroke=red stroke-width=5><animateMotion dur=10s repeatCount=indefinite rotate=auto><mpath xlink:href=#path1 /></animateMotion></path>
<path d="M0,0 L0,2000 z" fill=red stroke=red stroke-width=2><animateMotion dur=10s repeatCount=indefinite rotate=none><mpath xlink:href=#path1 /></animateMotion></path>
<path d="M0,0 L2000,0 z" fill=red stroke=red stroke-width=2><animateMotion dur=10s repeatCount=indefinite rotate=none><mpath xlink:href=#path1 /></animateMotion></path>
<path d="M0,-150 L0,150 z" fill=red stroke=red stroke-width=2><animateMotion dur=20s repeatCount=indefinite rotate=none><mpath xlink:href=#path2 /></animateMotion></path>
<path d="M-150,0 L150,0 z" fill=red stroke=red stroke-width=2><animateMotion dur=20s repeatCount=indefinite rotate=none><mpath xlink:href=#path3 /></animateMotion></path>
</svg>

146Name_Not_Found2015/09/22(火) 02:25:51.40ID:???
<text x=-10 y=20 font-family=Verdana font-size=16 fill=blue>t →<animateMotion dur=10s repeatCount=indefinite rotate=auto><mpath xlink:href=#path1 /></animateMotion></text>
<text x=-10 y=170 font-family=Verdana font-size=16 fill=blue>t →<animateMotion dur=20s repeatCount=indefinite rotate=none><mpath xlink:href=#path2 /></animateMotion></text>
<text x=170 y=4 font-family=Verdana font-size=16 fill=blue>t ↓<animateMotion dur=20s repeatCount=indefinite rotate=none><mpath xlink:href=#path3 /></animateMotion></text>
<text x=440 y=260 font-family=Verdana font-size=16 fill=blue>sin(t)</text>
<text x=230 y=460 font-family=Verdana font-size=16 fill=blue>cos(t)</text>
</svg>

147Name_Not_Found2015/09/22(火) 02:27:43.83ID:???
>>145 グラフだけのコード
>>146 追加テキストのコード

148Name_Not_Found2015/09/22(火) 02:29:07.13ID:???
もっと簡単にできないのかな?

149Name_Not_Found2015/09/22(火) 11:27:33.13ID:A/iMrMyl
<svg width=800 height=800 viewBox="0 0 903 903"><desc>sin(t) & cos(t)</desc>
<path d="M400,250 C391,51 109,51 100,250 109,449 391,449 400,250" fill=none stroke=blue stroke-width=2 id=path1 />
<path d="M500,250 900,250" fill=none stroke=none stroke-width=2 id=path2 /><path d="M250,500 250,900" fill=none stroke=none stroke-width=2 id=path3 />
<path d="M500,250 501,250" fill=none stroke=none stroke-width=2 id=path4 /><path d="M250,500 250,501" fill=none stroke=none stroke-width=2 id=path5 />
<path d="M500,250 C540,51 560,51 600,250 640,449 660,449 700,250 C740,51 760,51 800,250 840,449 860,449 900,250" fill=none stroke=blue stroke-width=2 />
<path d="M400,500 Q400,520 250,550 C49,590 49,610 250,650 451,690 451,710 250,750 C49,790 49,810 250,850 Q400,880 400,900" fill=none stroke=blue stroke-width=2 />
<path d="M -2,0 L 3,0 z" fill=red stroke=red stroke-width=5><animateMotion dur=10s repeatCount=indefinite rotate=auto><mpath xlink:href=#path1 /></animateMotion></path>
<path d="M0,0 L0,2000 z" fill=red stroke=red stroke-width=2><animateMotion dur=10s repeatCount=indefinite rotate=none><mpath xlink:href=#path1 /></animateMotion></path>
<path d="M0,0 L2000,0 z" fill=red stroke=red stroke-width=2><animateMotion dur=10s repeatCount=indefinite rotate=none><mpath xlink:href=#path1 /></animateMotion></path>

150Name_Not_Found2015/09/22(火) 11:28:06.98ID:???
<path d="M0,-150 L0,150 z" fill=red stroke=red stroke-width=2><animateMotion dur=20s repeatCount=indefinite rotate=none><mpath xlink:href=#path2 /></animateMotion></path>
<path d="M-150,0 L150,0 z" fill=red stroke=red stroke-width=2><animateMotion dur=20s repeatCount=indefinite rotate=none><mpath xlink:href=#path3 /></animateMotion></path>
<text x=-10 y=20 font-family=Verdana font-size=16 fill=blue>t →<animateMotion dur=10s repeatCount=indefinite rotate=auto><mpath xlink:href=#path1 /></animateMotion></text>
<text x=-10 y=170 font-family=Verdana font-size=16 fill=blue>t →<animateMotion dur=20s repeatCount=indefinite rotate=auto><mpath xlink:href=#path2 /></animateMotion></text>
<text x=-10 y=-162 font-family=Verdana font-size=16 fill=blue>t →<animateMotion dur=20s repeatCount=indefinite rotate=auto><mpath xlink:href=#path3 /></animateMotion></text>
<text x=-51 y=4 font-family=Verdana font-size=16 fill=blue>sin(t)<animateMotion dur=20000s repeatCount=indefinite rotate=auto><mpath xlink:href=#path4 /></animateMotion></text>
<text x=-55 y=-146 font-family=Verdana font-size=16 fill=blue>cos(t)<animateMotion dur=20000s repeatCount=indefinite rotate=auto><mpath xlink:href=#path5 /></animateMotion></text>
</svg>

151Name_Not_Found2015/09/22(火) 11:29:38.49ID:???
>>149-150 新コード

152Name_Not_Found2015/09/22(火) 12:00:30.81ID:???
ですよ 。 R-1ぐらんぷり2015 3回戦
http://aurorawave.atspace.tv/?sop:v/FhERjAbLR1Q&RDFhERjAbLR1Q http://i1.ytimg.com/vi/FhERjAbLR1Q/mqdefault.jpg #AuroraWaveTV

153Name_Not_Found2015/09/22(火) 17:40:56.22ID:???
p点とp'点では異なる位相で観測される
http://faustus.xii.jp/uploda/src/file745.htm

154Name_Not_Found2015/09/23(水) 08:24:01.00ID:JLHZDWq8
位相変換 p点とp'点では異なる位相で観測される
http://faustus.xii.jp/uploda/src/file747.htm

155Name_Not_Found2015/09/23(水) 09:20:03.29ID:???
位相変換 p点とp'点では異なる位相で観測
http://faustus.xii.jp/uploda/src/file747.htm

設問2 SVGプログラミング

このプログラムの文字数を
出来る限り小さくせよ

156Name_Not_Found2015/09/23(水) 09:22:35.52ID:???
位相変換 p点とp'点では異なる位相で観測
http://faustus.xii.jp/uploda/src/file747.htm

設問1 SVG数学
正弦波とpとの交点から
正弦波とp'との交点を
結んだ直線を黄色で描け

157Name_Not_Found2015/09/23(水) 12:12:23.03ID:???

158Name_Not_Found2015/09/23(水) 20:05:12.22ID:???
>>155 かなり小さくなった
<svg width=800 height=800 viewBox="70 70 1069 1069"><desc>sin(p)</desc>
<path d="M-700,0 -500,0" fill=none stroke=none stroke-width=2 id=path1 /><path d="M0,0 200,0 0,0 -200,0 z" fill=none stroke=none stroke-width=2 id=path2 />
<path d="M500,250 c96,-518 104,518 200,0 c96,-518 104,518 200,0 c96,-518 104,518 200,0 c96,-518 104,518 200,0 c96,-518 104,518 200,0 c96,-518 104,518 200,0 c96,-518 104,518 200,0 " fill=none stroke=black stroke-width=2>
<animateMotion dur=1s repeatCount=indefinite rotate=auto><mpath xlink:href=#path1 /></animateMotion></path>
<path d="M400,400 l0,-300 z" fill=green stroke=green stroke-width=2></path><text x=390 y=420 font-family=Verdana font-size=16 fill=green>p+λ</text>
<path d="M800,400 l0,-300 z" fill=green stroke=green stroke-width=2></path><text x=790 y=420 font-family=Verdana font-size=16 fill=green>p-λ</text>
<path d="M600,400 l0,-300 z" fill=blue stroke=blue stroke-width=2></path><text x=595 y=420 font-family=Verdana font-size=16 fill=blue>p</text>
<path d="M600,400 l0,-300 z" fill=red stroke=red stroke-width=2><animateMotion dur=15s repeatCount=indefinite rotate=none><mpath xlink:href=#path2 /></animateMotion></path>
<text x=595 y=420 font-family=Verdana font-size=16 fill=red>p'<animateMotion dur=15s repeatCount=indefinite rotate=none><mpath xlink:href=#path2 /></animateMotion></text>
</svg>

159Name_Not_Found2015/10/12(月) 19:02:00.76ID:dsv23UAz
スクリプトインストーラ
Tampermonkey  Chrome用 Sleipnir用 Tungsten用 Slimjet用 順序設定可能
https://chrome.google.com/webstore/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpobfkfo
Greasemonkey  Firefox用 PaleMoon用 Lunascape用 Cyberfox用 順序設定可能
https://addons.mozilla.org/ja/firefox/addon/greasemonkey/versions/
Violentmonkey  Opera用
https://addons.opera.com/ja/extensions/details/violent-monkey/
Scriptish  SeaMonkey用
https://addons.mozilla.org/ja/seamonkey/addon/scriptish
NinjaKit  Safari用
http://os0x.hatenablog.com/entry/20100612/1276330696

160Name_Not_Found2015/10/15(木) 14:22:00.07ID:???

161Name_Not_Found2015/11/02(月) 15:03:55.81ID:???
6116

162Name_Not_Found2017/12/12(火) 04:24:42.80ID:MrUcGD8N
ホームページで友達が稼げるようになった情報とか

⇒ http://asaswq3wq.sblo.jp/article/181819223.html

興味がある人だけ見てください。

HLISU7HJQZ

163Name_Not_Found2018/02/18(日) 20:27:56.22ID:???
☆ 日本の、改憲を行いましょう。現在、衆議員と参議院の
両院で、改憲議員が3分の2を超えております。
『憲法改正国民投票法』、でググってみてください。国会の発議は
すでに可能です。平和は勝ち取るものです。お願い致します。☆☆

164Name_Not_Found2018/05/01(火) 21:51:38.56ID:l1wYHpV1
誰でもできる在宅ワーク儲かる方法
少しでも多くの方の役に立ちたいです
グーグルで検索するといいかも『金持ちになりたい 鎌野介メソッド』

EV332

165Name_Not_Found2018/08/03(金) 09:05:26.40ID:ilUNb57d
lineにつけるmarkerについて
markerのfillって後で指定できないのかな?
fillの色だけ違う使いまわしができる矢印を管理する場合になるべく重複コード減らしたいんだがどうもうまくいかない
定義はこんな感じ
<style type="text/css">
.a_arrow01 { marker-start:url(#a_mk); marker-end:url(#a_mk); }
.b_arrow01 { marker-start:url(#b_mk); marker-end:url(#b_mk); }
</style>
<defs>
<polygon id="marker_p" points="10, 0 0,5 0,-5" />
<marker id="a_mk" viewBox="0 -5 10 10" refX="5" refY="0" markerWidth="10" markerHeight="10" orient="auto-start-reverse">
<use xlink:href="#marker_p" /></marker>
<marker id="b_mk" viewBox="0 -5 10 10" refX="5" refY="0" markerWidth="10" markerHeight="10" orient="auto-start-reverse">
<use xlink:href="#marker_p" /></marker>
</defs>

使う場所(前後のコードははしょったがこの関係性だと問題なく動く)
<line id="a_s" x1="5" y1="5" x2="5" y2="103" class="a_arrow01" />
<line id="b_s" x1="5" y1="5" x2="5" y2="245" class="b_arrow01" />

166Name_Not_Found2018/08/03(金) 23:44:50.53ID:???
XMLなんだし、実態参照を使えば。

167Name_Not_Found2018/08/05(日) 11:45:57.56ID:rQaUg0Ep
>>166
実体参照が何か知らないんですねw

168Name_Not_Found2018/08/05(日) 14:14:23.91ID:???
>>167
おまえこそ、XMLにおける実体参照を知らんだろ。w
わからんなら黙ってろよ。

169Name_Not_Found2018/08/06(月) 00:17:29.03ID:???
>>168
実体参照を、何処かの定義を使い回すものだって思ってるでしょ?
だから>>166みたいなレスしちゃったんでしょ?

170Name_Not_Found2018/08/06(月) 02:19:46.98ID:???
そうだが、なんだ?

171Name_Not_Found2018/08/06(月) 04:03:18.73ID:???
なんだ?なんだ?>>166
実体参照でなんの問題を解決しようとしたんだ?
ちょっと言ってみ

172Name_Not_Found2018/09/25(火) 13:28:46.87ID:???
勘違いするな
実態参照は実体参照とは全然違うものだよ

新着レスの表示
レスを投稿する