{"id":749,"date":"2006-12-03T18:29:08","date_gmt":"2006-12-03T09:29:08","guid":{"rendered":"http:\/\/zone.maple4ever.net\/blog\/archives\/749\/"},"modified":"2006-12-04T01:27:03","modified_gmt":"2006-12-03T16:27:03","slug":"svg-%e3%82%82%e3%81%86%e3%81%84%e3%81%a3%e3%81%a1%e3%82%87%e3%81%86","status":"publish","type":"post","link":"http:\/\/zone.maple4ever.net\/blog\/archives\/749\/","title":{"rendered":"SVG \u3082\u3046\u3044\u3063\u3061\u3087\u3046"},"content":{"rendered":"

SVG \u3082\u3046\u3044\u3063\u3061\u3087\u3046\u3044\u304d\u307e\u3059\u3002<\/p>\n

\u3000[Firefox\u306e\u307f\u3067\u52d5\u4f5c\u78ba\u8a8d]<\/object><\/p>\n

Opeara9 \u3067\u3082\u3044\u3051\u3066\u307e\u3059\u304b\uff1f \ud83d\ude42 > Sa\u30fbGa \u3055\u3093 \uff08\u30b3\u30e1\u30f3\u30c8\u3042\u308a\u304c\u3068\u3046\u3054\u3056\u3044\u307e\u3057\u305f\uff09<\/p>\n

\u6628\u65e5\u306e chameleon \u3055\u3093\u304b\u3089\u30b3\u30e1\u30f3\u30c8<\/a>\u3044\u305f\u3060\u304d\u307e\u3057\u305f\u3068\u304a\u308a\u3001Scalable Vector Graphics \u3067\u3059\u3002<\/p>\n

\u30d9\u30af\u30bf\u30fc\u30b0\u30e9\u30d5\u30a3\u30c3\u30af\u3092 XML \u3067\u6a19\u6e96\u7684\u306b\u8868\u73fe\u3057\u305f\u3082\u306e\u3067\u3001Web \u3067\u3082\u4f7f\u3046\u3053\u3068\u304c\u51fa\u6765\u307e\u3059\u3002\u3000\u3044\u307e\u306e\u3068\u3053\u308d\u3001Firefox \/ Opera \u7cfb\u3067\u30b5\u30dd\u30fc\u30c8\u3055\u308c\u3066\u3044\u308b\u6a21\u69d8\u3002 IE \u3067\u3082 adobe \u306e\u30d7\u30e9\u30b0\u30a4\u30f3\u3044\u308c\u308b\u3068\u307f\u308c\u308b\u307f\u305f\u3044\u3067\u3059\u306d\u3002<\/p>\n

DOM \u3067 JavaScript \u304b\u3089\u30c0\u30a4\u30ca\u30df\u30c3\u30afHTML \u307f\u305f\u3044\u306b\u5c5e\u6027\u5024\u3092\u3044\u3058\u308b\u3068\u3001\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3067\u304d\u305f\u308a\u30a4\u30f3\u30bf\u30e9\u30af\u30c6\u30a3\u30d6\u306b\u64cd\u4f5c\u3092\u3057\u305f\u308a\u3067\u304d\u307e\u3059\u3002\u3000\u4e0a\u306f\u30bf\u30a4\u30de\u30fc\u3067\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3055\u305b\u3066\u3044\u308b\u69d8\u5b50\u3067\u3059\u3002\u3000\uff08\u305f\u3060\u3001\u3042\u3093\u307e\u308a\u63cf\u753b\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u306f\u3088\u304f\u306a\u3044\u304b\u3082\u3002\u3000\u3044\u3084\u3001\u6c17\u306e\u305b\u3044\u304b\u3082 \ud83d\ude42<\/p>\n

SVG \u3092\u3060\u305b\u308b\u3001Inkscape<\/a>\u306e\u51fa\u529b\u30d5\u30a1\u30a4\u30eb\u3084\u5404\u7a2e\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u3092\u53c2\u8003\u306b\u3057\u3066\u3044\u308d\u3044\u308d\u3084\u3063\u3066\u307f\u3066\u3044\u308b\u306e\u3067\u3059\u304c\u3001\u3080\u3001\u3080\u305a\u3044\u3002\u3002<\/p>\n

\nScalable Vector Graphics (SVG) 1.1 Specification<\/a><\/p>\n

SVG\u5b66\u7fd2\u8f9e\u5178<\/a><\/p>\n

SVG\u5165\u9580\uff08SVG\u306b\u3064\u3044\u3066\u8a73\u3057\u304f\u89e3\u8aac\u3057\u307e\u3059<\/a>\n<\/p><\/blockquote>\n

\u30b3\u30cd\u30af\u30bf\u306f\u306a\u3044\u306e\u304b\u306a\u30fb\u30fb\u30fb\u3002<\/p>\n

XML \u3060\u3059\u3060\u3051\u3067\u30d9\u30af\u30bf\u30fc\u30b0\u30e9\u30d5\u30a3\u30c3\u30af\u304c\u63cf\u3051\u308b\u306e\u3067\u30b9\u30af\u30ea\u30d7\u30c8\u8a00\u8a9e\u3068\u76f8\u6027\u304c\u826f\u3055\u305d\u3046\u3067\u3059\u3002\u3000\u3082\u3046\u3061\u3087\u3063\u3068\u304c\u3093\u3070\u3063\u3066\u307f\u307e\u3059\u3002\u3002<\/p>\n

\u3060\u307e\u3057\u3060\u307e\u3057\u3084\u3063\u3066\u3044\u305f\u306e\u3067\u3001\u304b\u306a\u308a\u6065\u305a\u304b\u3057\u3044\u3082\u306e\u3067\u3059\u304c\u4e0a\u306e\u30bd\u30fc\u30b9\u304a\u3044\u3066\u304a\u304d\u307e\u3059\u3002\u3000\u8208\u5473\u304c\u3042\u308b\u65b9\u306f\u3042\u305d\u3093\u3067\u307f\u3066\u304f\u3060\u3055\u3044\u3002 \ud83d\ude42<\/p>\n

  1.  <?<\/span>xml <\/span>version<\/span>=<\/span>"<\/span>1.0<\/span>" <\/span>encoding<\/span>=<\/span>"<\/span>UTF-8<\/span>"<\/span>?>\r<\/span><\/li>\n
  2.  <<\/span>!<\/span>DOCTYPE\r<\/span><\/li>\n
  3.  \tsvg PUBLIC <\/span>"<\/span>-\/\/W3C\/\/DTD SVG 1.1\/\/EN<\/span>"\r<\/span><\/li>\n
  4.  \t"<\/span>http:\/\/www.w3.org\/Graphics\/SVG\/1.1\/DTD\/svg11.dtd<\/span>"<\/span>>\r<\/span><\/li>\n
  5.  <<\/span>svg\r<\/span><\/li>\n
  6.  \t<\/span>xmlns<\/span>=<\/span>"<\/span>http:\/\/www.w3.org\/2000\/svg<\/span>"\r<\/span><\/li>\n
  7.  \t<\/span>xmlns:xlink<\/span>=<\/span>"<\/span>http:\/\/www.w3.org\/1999\/xlink<\/span>"\r<\/span><\/li>\n
  8.  \t<\/span>onload<\/span>=<\/span>"<\/span>animation(evt)<\/span>"<\/span>>\r<\/span><\/li>\n
  9.  \t\r<\/span><\/li>\n
  10.  \t<\/span><!-- \u30a2\u30cb\u30e1\u7528\u306e JavaScript -->\r<\/span><\/li>\n
  11.  \t<\/span><<\/span>script <\/span>language<\/span>=<\/span>"<\/span>javascript1.2<\/span>"<\/span>>\r<\/span><\/li>\n
  12.  \t<\/span><![CDATA[\r<\/span><\/li>\n
  13.  \t\r<\/span><\/li>\n
  14.  \tvar svgdoc = null;\r<\/span><\/li>\n
  15.  \tvar rotate1 = 0;\r<\/span><\/li>\n
  16.  \tvar rotate2 = 0;\r<\/span><\/li>\n
  17.  \tvar rotate3 = 0;\r<\/span><\/li>\n
  18.  \t\r<\/span><\/li>\n
  19.  \t\/* onLoad \u306e\u30a4\u30d9\u30f3\u30c8\u30cf\u30f3\u30c9\u30eb\u3057\u3066\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u53d6\u5f97\/\u30bf\u30a4\u30de\u958b\u59cb *\/\r<\/span><\/li>\n
  20.  \tfunction animation(evt) {\r<\/span><\/li>\n
  21.  \t\t\r<\/span><\/li>\n
  22.  \t\ttarget = evt.target\r<\/span><\/li>\n
  23.  \t\tsvgdoc = target.ownerDocument;\r<\/span><\/li>\n
  24.  \t\t\r<\/span><\/li>\n
  25.  \t\tnext_frame();\r<\/span><\/li>\n
  26.  \t\tsetInterval('next_frame()', 20);\r<\/span><\/li>\n
  27.  \t\r<\/span><\/li>\n
  28.  \t}\r<\/span><\/li>\n
  29.  \t\r<\/span><\/li>\n
  30.  \t\/* \u5c5e\u6027\u53d6\u3063\u3066\u5909\u66f4\u3059\u308b\u3068\u30a2\u30cb\u30e1\u3059\u308b *\/\r<\/span><\/li>\n
  31.  \tfunction next_frame() {\r<\/span><\/li>\n
  32.  \t\t\r<\/span><\/li>\n
  33.  \t\tvar rect1 = svgdoc.getElementById('rect1');\r<\/span><\/li>\n
  34.  \t\tvar rect2 = svgdoc.getElementById('rect2');\r<\/span><\/li>\n
  35.  \t\tvar rect3 = svgdoc.getElementById('rect3');\r<\/span><\/li>\n
  36.  \t\t\r<\/span><\/li>\n
  37.  \t\tro1 = "rotate(" + rotate1 + ",200,150)";\r<\/span><\/li>\n
  38.  \t\tro2 = "rotate(" + rotate2 + ",200,250)";\r<\/span><\/li>\n
  39.  \t\tro3 = "rotate(" + rotate3 + ",250,250)";\r<\/span><\/li>\n
  40.  \t\t\r<\/span><\/li>\n
  41.  \t\trect1.setAttribute("transform", ro1);\r<\/span><\/li>\n
  42.  \t\trect2.setAttribute("transform", ro2);\r<\/span><\/li>\n
  43.  \t\trect3.setAttribute("transform", ro3);\r<\/span><\/li>\n
  44.  \t\t\r<\/span><\/li>\n
  45.  \t\trotate1++;\r<\/span><\/li>\n
  46.  \t\trotate2--;\r<\/span><\/li>\n
  47.  \t\trotate3++;\r<\/span><\/li>\n
  48.  \t\t\r<\/span><\/li>\n
  49.  \t}\r<\/span><\/li>\n
  50.  \t]]>\r<\/span><\/li>\n
  51.  \t<\/span><\/<\/span>script<\/span>>\r<\/span><\/li>\n
  52.  \t\r<\/span><\/li>\n
  53.  \t<\/span><!-- \u56f3\u5f62\u306e\u5b9a\u7fa9 -->\r<\/span><\/li>\n
  54.  \t<\/span><<\/span>g <\/span>fill-opacity<\/span>=<\/span>"<\/span>0.7<\/span>" <\/span>stroke<\/span>=<\/span>"<\/span>black<\/span>" <\/span>stroke-width<\/span>=<\/span>"<\/span>4px<\/span>"<\/span>>\r<\/span><\/li>\n
  55.  \t\t<<\/span>rect <\/span>id<\/span>=<\/span>"<\/span>rect1<\/span>" <\/span>transform<\/span>=<\/span>"" <\/span>x<\/span>=<\/span>"<\/span>150<\/span>" <\/span>y<\/span>=<\/span>"<\/span>100<\/span>" <\/span>width<\/span>=<\/span>"<\/span>150<\/span>" <\/span>height<\/span>=<\/span>"<\/span>150<\/span>" <\/span>fill<\/span>=<\/span>"<\/span>red<\/span>" <\/span>\/>\r<\/span><\/li>\n
  56.  \t\t<<\/span>rect <\/span>id<\/span>=<\/span>"<\/span>rect2<\/span>" <\/span>transform<\/span>=<\/span>"" <\/span>x<\/span>=<\/span>"<\/span>100<\/span>" <\/span>y<\/span>=<\/span>"<\/span>200<\/span>" <\/span>width<\/span>=<\/span>"<\/span>150<\/span>" <\/span>height<\/span>=<\/span>"<\/span>150<\/span>" <\/span>fill<\/span>=<\/span>"<\/span>blue<\/span>" <\/span>\/>\r<\/span><\/li>\n
  57.  \t\t<<\/span>rect <\/span>id<\/span>=<\/span>"<\/span>rect3<\/span>" <\/span>transform<\/span>=<\/span>"" <\/span>x<\/span>=<\/span>"<\/span>200<\/span>" <\/span>y<\/span>=<\/span>"<\/span>200<\/span>" <\/span>width<\/span>=<\/span>"<\/span>150<\/span>" <\/span>height<\/span>=<\/span>"<\/span>150<\/span>" <\/span>fill<\/span>=<\/span>"<\/span>green<\/span>" <\/span>\/>\r<\/span><\/li>\n
  58.  \t<\/<\/span>g<\/span>>\r<\/span><\/li>\n
  59.  \t\r<\/span><\/li>\n
  60.  <\/<\/span>svg<\/span>><\/span><\/li><\/ol><\/div>\n

    \u8ffd\u8a18\u3002<\/p>\n

    \u6b63\u76f4\u3044\u307e\u306f\u53cd\u7701\u3057\u3066\u3044\u308b\uff65\uff65\uff65\u3002<\/p>\n

    \u3000[Firefox\u306e\u307f\u3067\u52d5\u4f5c\u78ba\u8a8d]<\/object><\/p>\n

    \u2191\u3053\u308c\u306f Opera \u3060\u3068\u3060\u3081\u306a\u3088\u3046\u3067\u3059…\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"

    SVG \u3082\u3046\u3044\u3063\u3061\u3087\u3046\u3044\u304d\u307e\u3059\u3002 \u3000[Firefox\u306e\u307f\u3067\u52d5\u4f5c\u78ba\u8a8d] Opeara9 \u3067\u3082\u3044\u3051\u3066\u307e\u3059\u304b\uff1f \ud83d\ude42 > Sa\u30fbGa \u3055\u3093 \uff08\u30b3\u30e1\u30f3\u30c8\u3042\u308a\u304c\u3068\u3046\u3054\u3056\u3044\u307e\u3057\u305f\uff09 \u6628\u65e5\u306e chameleon \u3055\u3093\u304b\u3089\u30b3\u30e1\u30f3\u30c8\u3044\u305f\u3060\u304d\u307e\u3057\u305f\u3068\u304a\u308a\u3001Scalable Vector Graphics \u3067\u3059\u3002 \u30d9\u30af\u30bf\u30fc\u30b0\u30e9\u30d5\u30a3\u30c3\u30af\u3092 XML \u3067\u6a19\u6e96\u7684\u306b\u8868\u73fe\u3057\u305f\u3082\u306e\u3067\u3001Web \u3067\u3082\u4f7f\u3046\u3053\u3068\u304c\u51fa\u6765\u307e\u3059\u3002\u3000\u3044\u307e\u306e\u3068\u3053\u308d\u3001Firefox \/ Opera \u7cfb\u3067\u30b5\u30dd\u30fc\u30c8\u3055\u308c\u3066\u3044\u308b\u6a21\u69d8\u3002 IE \u3067\u3082 adobe \u306e\u30d7\u30e9\u30b0\u30a4\u30f3\u3044\u308c\u308b\u3068\u307f\u308c\u308b\u307f\u305f\u3044\u3067\u3059\u306d\u3002 DOM \u3067 JavaScript \u304b\u3089\u30c0\u30a4\u30ca\u30df\u30c3\u30afHTML \u307f\u305f\u3044\u306b\u5c5e\u6027\u5024\u3092\u3044\u3058\u308b\u3068\u3001\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3067\u304d\u305f\u308a\u30a4\u30f3\u30bf\u30e9\u30af\u30c6\u30a3\u30d6\u306b\u64cd\u4f5c\u3092\u3057\u305f\u308a\u3067\u304d\u307e\u3059\u3002\u3000\u4e0a\u306f\u30bf\u30a4\u30de\u30fc\u3067\u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u3055\u305b\u3066\u3044\u308b\u69d8\u5b50\u3067\u3059\u3002\u3000\uff08\u305f\u3060\u3001\u3042\u3093\u307e\u308a\u63cf\u753b\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u306f\u3088\u304f\u306a\u3044\u304b\u3082\u3002\u3000\u3044\u3084\u3001\u6c17\u306e\u305b\u3044\u304b\u3082 \ud83d\ude42 SVG \u3092\u3060\u305b\u308b\u3001Inkscape\u306e\u51fa\u529b\u30d5\u30a1\u30a4\u30eb\u3084\u5404\u7a2e\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u3092\u53c2\u8003\u306b\u3057\u3066\u3044\u308d\u3044\u308d\u3084\u3063\u3066\u307f\u3066\u3044\u308b\u306e\u3067\u3059\u304c\u3001\u3080\u3001\u3080\u305a\u3044\u3002\u3002 Scalable Vector Graphics (SVG) 1.1 Specification SVG\u5b66\u7fd2\u8f9e\u5178 SVG\u5165\u9580\uff08SVG\u306b\u3064\u3044\u3066\u8a73\u3057\u304f\u89e3\u8aac\u3057\u307e\u3059 \u30b3\u30cd\u30af\u30bf\u306f\u306a\u3044\u306e\u304b\u306a\u30fb\u30fb\u30fb\u3002 XML \u3060\u3059\u3060\u3051\u3067\u30d9\u30af\u30bf\u30fc\u30b0\u30e9\u30d5\u30a3\u30c3\u30af\u304c\u63cf\u3051\u308b\u306e\u3067\u30b9\u30af\u30ea\u30d7\u30c8\u8a00\u8a9e\u3068\u76f8\u6027\u304c\u826f\u3055\u305d\u3046\u3067\u3059\u3002\u3000\u3082\u3046\u3061\u3087\u3063\u3068\u304c\u3093\u3070\u3063\u3066\u307f\u307e\u3059\u3002\u3002 \u3060\u307e\u3057\u3060\u307e\u3057\u3084\u3063\u3066\u3044\u305f\u306e\u3067\u3001\u304b\u306a\u308a\u6065\u305a\u304b\u3057\u3044\u3082\u306e\u3067\u3059\u304c\u4e0a\u306e\u30bd\u30fc\u30b9\u304a\u3044\u3066\u304a\u304d\u307e\u3059\u3002\u3000\u8208\u5473\u304c\u3042\u308b\u65b9\u306f\u3042\u305d\u3093\u3067\u307f\u3066\u304f\u3060\u3055\u3044\u3002 \ud83d\ude42  <?xml version="1.0" encoding="UTF-8"?>  <!DOCTYPE   svg PUBLIC […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"_links":{"self":[{"href":"http:\/\/zone.maple4ever.net\/blog\/wp-json\/wp\/v2\/posts\/749"}],"collection":[{"href":"http:\/\/zone.maple4ever.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/zone.maple4ever.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/zone.maple4ever.net\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/zone.maple4ever.net\/blog\/wp-json\/wp\/v2\/comments?post=749"}],"version-history":[{"count":0,"href":"http:\/\/zone.maple4ever.net\/blog\/wp-json\/wp\/v2\/posts\/749\/revisions"}],"wp:attachment":[{"href":"http:\/\/zone.maple4ever.net\/blog\/wp-json\/wp\/v2\/media?parent=749"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/zone.maple4ever.net\/blog\/wp-json\/wp\/v2\/categories?post=749"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/zone.maple4ever.net\/blog\/wp-json\/wp\/v2\/tags?post=749"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}