A fist stab at foreignObject support

Ability to resize (etc) the still-invisible
element.
Also, some improvements from SVG-Edit trunk.

public/svg-edit/AUTHORS

@@ -14,8 +14,9 @@ fa: Payman Delshad <payman@opera.com> (فارسی)
 fr: wormsxulla <wormsxulla@yahoo.com> (Français)
 fy: Wander Nauta <info@wandernauta.nl> (Frysk)
 hi: Tavish Naruka <tavishnaruka@gmail.com> (हिन्दी)
+ja: Dong <iwadon@yarhalla.jpn.org> (日本語)
 nl: Jaap Blom <jaap.blom@gmail.com> (Nederlands)
 ro: Christian Tzurcanu <christian.tzurcanu@gmail.com> (Româneşte)
-ru: Laurent Dufloux <laurent.dufloux@etu.upmc.fr> (Русский язык)
+ru: Laurent Dufloux <laurent.dufloux@etu.upmc.fr> (Русский)
 sk: Pavol Rusnak <rusnakp@gmail.com> (Slovenčina)
-zh-TW: 黃瀚生(han sheng Huang) <zenixls2@gmail.com> (台灣正體)
+zh-TW: 黃瀚生(han sheng Huang) <zenixls2@gmail.com> (台灣正體)

public/svg-edit/editor/locale/lang.ja.js

@@ -1,156 +1,156 @@
 [
-{"id": "align_relative_to", "title": "整列するために相対的な ..."},
+{"id": "align_relative_to", "title": "揃える"},
-{"id": "angle", "title": "変更の回転角"},
+{"id": "angle", "title": "回転角の変更"},
 {"id": "angleLabel", "textContent": "角度:"},
-{"id": "bkgnd_color", "title": "変更の背景色/不透明度"},
+{"id": "bkgnd_color", "title": "背景色/不透明度の変更"},
-{"id": "circle_cx", "title": "変更円の佐川急便の座標"},
+{"id": "circle_cx", "title": "円の中心を変更（X座標）"},
-{"id": "circle_cy", "title": "変更サークルサイ座標"},
+{"id": "circle_cy", "title": "円の中心を変更（Y座標）"},
 {"id": "circle_r", "title": "変更円の半径"},
-{"id": "cornerRadiusLabel", "textContent": "コーナー半径："},
+{"id": "cornerRadiusLabel", "textContent": "角の半径："},
-{"id": "curve_segments", "textContent": "Curve"},
+{"id": "curve_segments", "textContent": "カーブ"},
-{"id": "ellipse_cx", "title": "の座標佐川急便楕円を変更する"},
+{"id": "ellipse_cx", "title": "楕円の中心を変更（X座標）"},
-{"id": "ellipse_cy", "title": "変更楕円サイ座標"},
+{"id": "ellipse_cy", "title": "楕円の中心を変更（Y座標）"},
-{"id": "ellipse_rx", "title": "変更する楕円のx半径"},
+{"id": "ellipse_rx", "title": "楕円の半径を変更（X座標）"},
-{"id": "ellipse_ry", "title": "変更する楕円のy半径"},
+{"id": "ellipse_ry", "title": "楕円の半径を変更（Y座標）"},
-{"id": "fill_color", "title": "変更の塗りつぶしの色"},
+{"id": "fill_color", "title": "塗りの色を変更"},
-{"id": "fill_tool_bottom", "textContent": "満ちる:"},
+{"id": "fill_tool_bottom", "textContent": "塗り:"},
-{"id": "fitToContent", "textContent": "フィットコンテンツへ"},
+{"id": "fitToContent", "textContent": "コンテンツに合わせる"},
-{"id": "fit_to_all", "textContent": "フィットすべてのコンテンツに"},
+{"id": "fit_to_all", "textContent": "すべてのコンテンツに合わせる"},
-{"id": "fit_to_canvas", "textContent": "フィットキャンバスに"},
+{"id": "fit_to_canvas", "textContent": "キャンバスに合わせる"},
-{"id": "fit_to_layer_content", "textContent": "に合うようにレイヤーのコンテンツ"},
+{"id": "fit_to_layer_content", "textContent": "レイヤー上のコンテンツに合わせる"},
-{"id": "fit_to_sel", "textContent": "フィットを選択する"},
+{"id": "fit_to_sel", "textContent": "選択対象に合わせる"},
-{"id": "font_family", "title": "フォントの変更ご家族"},
+{"id": "font_family", "title": "フォントファミリーの変更"},
 {"id": "font_size", "title": "文字サイズの変更"},
-{"id": "group_opacity", "title": "変更項目の不透明度を選択"},
+{"id": "group_opacity", "title": "不透明度"},
 {"id": "icon_large", "textContent": "Large"},
 {"id": "icon_medium", "textContent": "Medium"},
 {"id": "icon_small", "textContent": "Small"},
 {"id": "icon_xlarge", "textContent": "Extra Large"},
 {"id": "iheightLabel", "textContent": "高さ:"},
-{"id": "image_height", "title": "変更するイメージの高さ"},
+{"id": "image_height", "title": "画像の高さを変更"},
-{"id": "image_opt_embed", "textContent": "Embed data (local files)"},
+{"id": "image_opt_embed", "textContent": "SVGファイルに埋め込む"},
-{"id": "image_opt_ref", "textContent": "Use file reference"},
+{"id": "image_opt_ref", "textContent": "画像を参照する"},
 {"id": "image_url", "title": "URLを変更"},
-{"id": "image_width", "title": "変更するイメージの幅"},
+{"id": "image_width", "title": "画像の幅を変更"},
-{"id": "includedImages", "textContent": "Included Images"},
+{"id": "includedImages", "textContent": "挿入された画像の扱い"},
 {"id": "iwidthLabel", "textContent": "幅:"},
 {"id": "largest_object", "textContent": "最大のオブジェクト"},
-{"id": "layer_delete", "title": "レイヤーの削除"},
+{"id": "layer_delete", "title": "レイヤの削除"},
-{"id": "layer_down", "title": "レイヤ下へ移動"},
+{"id": "layer_down", "title": "レイヤを下へ移動"},
-{"id": "layer_new", "title": "New Layer"},
+{"id": "layer_new", "title": "新規レイヤ"},
-{"id": "layer_rename", "title": "名前を変更するレイヤ"},
+{"id": "layer_rename", "title": "レイヤの名前を変更"},
-{"id": "layer_up", "title": "最大のレイヤに移動"},
+{"id": "layer_up", "title": "レイヤを上へ移動"},
-{"id": "layersLabel", "textContent": "層:"},
+{"id": "layersLabel", "textContent": "レイヤ:"},
-{"id": "line_x1", "title": "変更行のx座標を開始"},
+{"id": "line_x1", "title": "開始X座標"},
-{"id": "line_x2", "title": "変更行のx座標を終了"},
+{"id": "line_x2", "title": "終了X座標"},
-{"id": "line_y1", "title": "変更直線y開始の座標"},
+{"id": "line_y1", "title": "開始Y座標"},
-{"id": "line_y2", "title": "変更直線y期の座標"},
+{"id": "line_y2", "title": "終了Y座標"},
 {"id": "page", "textContent": "ページ"},
-{"id": "palette", "title": "をクリックして、色、シフトを埋めるストロークの色を変更するをクリックして変更する"},
+{"id": "palette", "title": "クリックで塗りの色を選択、Shift+クリックで線の色を選択"},
-{"id": "path_node_x", "title": "Change node's x coordinate"},
+{"id": "path_node_x", "title": "ノードのX座標を変更"},
-{"id": "path_node_y", "title": "Change node's y coordinate"},
+{"id": "path_node_y", "title": "ノードのY座標を変更"},
-{"id": "rect_height", "title": "変更する四角形の高さ"},
+{"id": "rect_height", "title": "長方形の高さを変更"},
-{"id": "rect_rx", "title": "変更長方形コーナー半径"},
+{"id": "rect_rx", "title": "長方形の角の半径を変更"},
-{"id": "rect_width", "title": "変更する長方形の幅"},
+{"id": "rect_width", "title": "長方形の幅を変更"},
 {"id": "relativeToLabel", "textContent": "相対:"},
 {"id": "rheightLabel", "textContent": "高さ："},
 {"id": "rwidthLabel", "textContent": "幅："},
-{"id": "seg_type", "title": "Change Segment type"},
+{"id": "seg_type", "title": "線分の種類を変更"},
-{"id": "selLayerLabel", "textContent": "Move elements to:"},
+{"id": "selLayerLabel", "textContent": "移動先レイヤ:"},
-{"id": "selLayerNames", "title": "Move selected elements to a different layer"},
+{"id": "selLayerNames", "title": "選択対象を別のレイヤに移動"},
-{"id": "selectedPredefined", "textContent": "を選択する事前定義された:"},
+{"id": "selectedPredefined", "textContent": "デフォルト"},
-{"id": "selected_objects", "textContent": "選ばれたオブジェクト"},
+{"id": "selected_objects", "textContent": "選択オブジェクト"},
-{"id": "selected_x", "title": "Change X coordinate"},
+{"id": "selected_x", "title": "X座標を変更"},
-{"id": "selected_y", "title": "Change Y coordinate"},
+{"id": "selected_y", "title": "Y座標を変更"},
 {"id": "smallest_object", "textContent": "最小のオブジェクト"},
-{"id": "straight_segments", "textContent": "Straight"},
+{"id": "straight_segments", "textContent": "直線"},
-{"id": "stroke_color", "title": "変更ストロークの色"},
+{"id": "stroke_color", "title": "線の色を変更"},
-{"id": "stroke_style", "title": "変更ストロークダッシュスタイル"},
+{"id": "stroke_style", "title": "線種の変更"},
-{"id": "stroke_tool_bottom", "textContent": "打撃:"},
+{"id": "stroke_tool_bottom", "textContent": "線:"},
-{"id": "stroke_width", "title": "変更ストローク幅"},
+{"id": "stroke_width", "title": "線幅の変更"},
-{"id": "svginfo_bg_note", "textContent": "Note: Background will not be saved with image."},
+{"id": "svginfo_bg_note", "textContent": "※背景色はファイルに保存されません。"},
-{"id": "svginfo_change_background", "textContent": "Editor Background"},
+{"id": "svginfo_change_background", "textContent": "エディタの背景色"},
-{"id": "svginfo_dim", "textContent": "Canvas Dimensions"},
+{"id": "svginfo_dim", "textContent": "キャンバスの大きさ"},
-{"id": "svginfo_editor_prefs", "textContent": "Editor Preferences"},
+{"id": "svginfo_editor_prefs", "textContent": "エディタの設定"},
 {"id": "svginfo_height", "textContent": "高さ:"},
-{"id": "svginfo_icons", "textContent": "Icon size"},
+{"id": "svginfo_icons", "textContent": "アイコンの大きさ"},
-{"id": "svginfo_image_props", "textContent": "Image Properties"},
+{"id": "svginfo_image_props", "textContent": "イメージの設定"},
-{"id": "svginfo_lang", "textContent": "Language"},
+{"id": "svginfo_lang", "textContent": "言語"},
-{"id": "svginfo_title", "textContent": "Title"},
+{"id": "svginfo_title", "textContent": "タイトル"},
 {"id": "svginfo_width", "textContent": "幅:"},
-{"id": "text", "title": "変更するテキストの内容"},
+{"id": "text", "title": "テキストの内容の変更"},
 {"id": "tool_alignbottom", "title": "下揃え"},
 {"id": "tool_aligncenter", "title": "中央揃え"},
 {"id": "tool_alignleft", "title": "左揃え"},
-{"id": "tool_alignmiddle", "title": "整列中東"},
+{"id": "tool_alignmiddle", "title": "中央揃え"},
 {"id": "tool_alignright", "title": "右揃え"},
-{"id": "tool_aligntop", "title": "整列トップ"},
+{"id": "tool_aligntop", "title": "上揃え"},
-{"id": "tool_bold", "title": "太字テキスト"},
+{"id": "tool_bold", "title": "太字"},
-{"id": "tool_circle", "title": "サークル"},
+{"id": "tool_circle", "title": "円"},
-{"id": "tool_clear", "textContent": "新しいイメージ"},
+{"id": "tool_clear", "textContent": "新規イメージ"},
-{"id": "tool_clone", "title": "クローン要素"},
+{"id": "tool_clone", "title": "複製"},
-{"id": "tool_clone_multi", "title": "クローンの要素"},
+{"id": "tool_clone_multi", "title": "選択対象を複製"},
-{"id": "tool_delete", "title": "削除する要素"},
+{"id": "tool_delete", "title": "削除"},
-{"id": "tool_delete_multi", "title": "Delete Selected Elements"},
+{"id": "tool_delete_multi", "title": "選択対象を削除"},
 {"id": "tool_docprops", "textContent": "文書のプロパティ"},
 {"id": "tool_docprops_cancel", "textContent": "キャンセル"},
 {"id": "tool_docprops_save", "textContent": "OK"},
 {"id": "tool_ellipse", "title": "楕円"},
 {"id": "tool_fhellipse", "title": "フリーハンド楕円"},
 {"id": "tool_fhpath", "title": "鉛筆ツール"},
-{"id": "tool_fhrect", "title": "フリーハンドのRectangle"},
+{"id": "tool_fhrect", "title": "フリーハンド長方形"},
-{"id": "tool_group", "title": "グループ要素"},
+{"id": "tool_group", "title": "グループ化"},
 {"id": "tool_image", "title": "イメージツール"},
-{"id": "tool_italic", "title": "イタリック体のテキスト"},
+{"id": "tool_italic", "title": "イタリック体"},
-{"id": "tool_line", "title": "ラインツール"},
+{"id": "tool_line", "title": "直線ツール"},
-{"id": "tool_move_bottom", "title": "下に移動"},
+{"id": "tool_move_bottom", "title": "奥に移動"},
-{"id": "tool_move_top", "title": "トップに移動します。"},
+{"id": "tool_move_top", "title": "手前に移動"},
-{"id": "tool_node_clone", "title": "Clone Node"},
+{"id": "tool_node_clone", "title": "ノードを複製"},
-{"id": "tool_node_delete", "title": "Delete Node"},
+{"id": "tool_node_delete", "title": "ノードを削除"},
-{"id": "tool_node_link", "title": "Link Control Points"},
+{"id": "tool_node_link", "title": "制御点の接続"},
-{"id": "tool_open", "textContent": "[イメージを開く"},
+{"id": "tool_open", "textContent": "イメージを開く"},
-{"id": "tool_path", "title": "Path tool"},
+{"id": "tool_path", "title": "パスツール"},
-{"id": "tool_rect", "title": "四角形"},
+{"id": "tool_rect", "title": "長方形"},
-{"id": "tool_redo", "title": "REDOログ"},
+{"id": "tool_redo", "title": "やり直し"},
-{"id": "tool_reorient", "title": "Reorient path"},
+{"id": "tool_reorient", "title": "現在の角度を０度とする"},
 {"id": "tool_save", "textContent": "画像を保存"},
 {"id": "tool_select", "title": "選択ツール"},
-{"id": "tool_source", "title": "[編集]ソース"},
+{"id": "tool_source", "title": "ソースの編集"},
 {"id": "tool_source_cancel", "textContent": "キャンセル"},
-{"id": "tool_source_save", "textContent": "Apply Changes"},
+{"id": "tool_source_save", "textContent": "適用"},
-{"id": "tool_square", "title": "広場"},
+{"id": "tool_square", "title": "正方形"},
 {"id": "tool_text", "title": "テキストツール"},
-{"id": "tool_topath", "title": "Convert to Path"},
+{"id": "tool_topath", "title": "パスに変換"},
 {"id": "tool_undo", "title": "元に戻す"},
-{"id": "tool_ungroup", "title": "グループ化を解除要素"},
+{"id": "tool_ungroup", "title": "グループ化を解除"},
-{"id": "tool_wireframe", "title": "Wireframe Mode [F]"},
+{"id": "tool_wireframe", "title": "ワイヤーフレームで表示 [F]"},
 {"id": "tool_zoom", "title": "ズームツール"},
-{"id": "zoom", "title": "変更のズームレベル"},
+{"id": "zoom", "title": "ズーム倍率の変更"},
 {"id": "zoomLabel", "textContent": "ズーム:"},
-{"id": "sidepanel_handle", "textContent": "L a y e r s", "title": "Drag left/right to resize side panel"},
+{"id": "sidepanel_handle", "textContent": "L a y e r s", "title": "ドラッグで幅の調整"},
 {
  "js_strings": {
-  "QerrorsRevertToSource": "There were parsing errors in your SVG source.\nRevert back to original SVG source?", 
+  "QerrorsRevertToSource": "ソースにエラーがあります。\n元のソースに戻しますか？", 
-  "QignoreSourceChanges": "Ignore changes made to SVG source?", 
+  "QignoreSourceChanges": "ソースの変更を無視しますか？", 
-  "QmoveElemsToLayer": "Move selected elements to layer '%s'?", 
+  "QmoveElemsToLayer": "選択した要素をレイヤー '%s' に移動しますか？", 
-  "QwantToClear": "Do you want to clear the drawing?\nThis will also erase your undo history!", 
+  "QwantToClear": "キャンバスをクリアしますか？\nアンドゥ履歴も消去されます。", 
-  "cancel": "Cancel", 
+  "cancel": "キャンセル", 
-  "dupeLayerName": "There is already a layer named that!", 
+  "dupeLayerName": "同名のレイヤーが既に存在します。", 
-  "enterNewImgURL": "Enter the new image URL", 
+  "enterNewImgURL": "画像のURLを入力してください。", 
-  "enterNewLayerName": "Please enter the new layer name", 
+  "enterNewLayerName": "レイヤの新しい名前を入力してください。", 
-  "enterUniqueLayerName": "Please enter a unique layer name", 
+  "enterUniqueLayerName": "新規レイヤの一意な名前を入力してください。", 
-  "featNotSupported": "Feature not supported", 
+  "featNotSupported": "機能はサポートされていません。", 
-  "invalidAttrValGiven": "Invalid value given", 
+  "invalidAttrValGiven": "無効な値が指定されています。", 
   "key_backspace": "backspace", 
   "key_del": "delete", 
   "key_down": "down", 
   "key_up": "up", 
-  "layer": "Layer", 
+  "layer": "レイヤ", 
-  "layerHasThatName": "Layer already has that name", 
+  "layerHasThatName": "既に同名が付いています。", 
-  "noContentToFitTo": "No content to fit to", 
+  "noContentToFitTo": "合わせる対象のコンテンツがありません。", 
   "ok": "OK", 
-  "pathCtrlPtTooltip": "Drag control point to adjust curve properties", 
+  "pathCtrlPtTooltip": "カーブの形状を調整するには、制御点をドラッグしてください。", 
-  "pathNodeTooltip": "Drag node to move it. Double-click node to change segment type"
+  "pathNodeTooltip": "移動するには、ノードをドラッグしてください。ノードをダブルクリックすると線分の種類を変更できます。"
  }
 }
 ]

public/svg-edit/editor/locale/locale.js

@@ -9,7 +9,7 @@
 var put_locale = function(svgCanvas, given_param){
 	var lang_param;
 	// TODO: Make this array be based on entries in svg-editor.html
-	var good_langs = ['ar','cs','de','en','es','fa','fr','fy','hi','nl','ro','ru','sk','zh-TW'];
+	var good_langs = ['ar','cs','de','en','es','fa','fr','fy','hi','ja','nl','ro','ru','sk','zh-TW'];
 	if(given_param) {
 		lang_param = given_param;
 	} else {

public/svg-edit/editor/svg-editor.css

@@ -37,6 +37,12 @@
 	height: 480px;
 	-apple-dashboard-region:dashboard-region(control rectangle 0px 0px 0px 0px); /* for widget regions that shouldn't react to dragging */
 	position: relative;
+	/* 
+	  A subtle gradient effect in the canvas.
+	  Just experimenting - not sure if this is worth it.
+	*/
+	background: -moz-radial-gradient(45deg,#bbb,#222);
+	background: -webkit-gradient(radial, center center, 3, center center, 1000, from(#bbb), to(#222));
 }
 
 #svg_editor div#palette_holder {

public/svg-edit/editor/svg-editor.html

@@ -525,6 +525,7 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
 					<option id="lang_fr" value="fr">Français</option>
 					<option id="lang_fy" value="fy">Frysk</option>
 					<option id="lang_hi" value="hi">&#2361;&#2367;&#2344;&#2381;&#2342;&#2368;, &#2361;&#2367;&#2306;&#2342;&#2368;</option>
+					<option id="lang_ja" value="ja">日本語</option>
 					<option id="lang_nl" value="nl">Nederlands</option>
 					<option id="lang_ro" value="ro">Româneşte</option>
 					<option id="lang_ru" value="ru">Русский</option>

public/svg-edit/editor/svg-editor.js

@@ -42,7 +42,6 @@ function svg_edit_setup() {
 		default_img_url = "images/logo.png",
 		workarea = $("#workarea");
 	
-	
 	// Store and retrieve preferences
 	$.pref = function(key, val) {
 		if(val) curPrefs[key] = val;
@@ -2704,7 +2703,7 @@ function svg_edit_setup() {
 		updateCanvas(true);
 	});
 	
-//	var revnums = "svg-editor.js ($Rev: 1347 $) ";
+//	var revnums = "svg-editor.js ($Rev: 1355 $) ";
 //	revnums += svgCanvas.getVersion();
 //	$('#copyright')[0].setAttribute("title", revnums);
 	return svgCanvas;

public/svg-edit/editor/svgcanvas.js

@@ -20,6 +20,68 @@ if(window.opera) {
 	window.console.dir = function(str) {};
 }
 
+(function() {
+
+	// This fixes $(...).attr() to work as expected with SVG elements.
+	// Does not currently use *AttributeNS() since we rarely need that.
+	
+	// See http://api.jquery.com/attr/ for basic documentation of .attr()
+	
+	// Additional functionality: 
+	// - When getting attributes, a string that's a number is return as type number.
+	// - If an array is supplied as first parameter, multiple values are returned
+	// as an object with values for each given attributes
+	
+	var proxied = jQuery.fn.attr, svgns = "http://www.w3.org/2000/svg";
+	jQuery.fn.attr = function(key, value) {
+		var len = this.length;
+		if(!len) return this;
+		for(var i=0; i<len; i++) {
+			var elem = this[i];
+			// set/get SVG attribute
+			if(elem.namespaceURI === svgns) {
+				// Setting attribute
+				if(value !== undefined) {
+					elem.setAttribute(key, value);
+				} else if($.isArray(key)) {
+					// Getting attributes from array
+					var j = key.length, obj = {};
+
+					while(j--) {
+						var aname = key[j];
+						var attr = elem.getAttribute(aname);
+						// This returns a number when appropriate
+						if(attr || attr === "0") {
+							attr = isNaN(attr)?attr:attr-0;
+						}
+						obj[aname] = attr;
+					}
+					return obj;
+				
+				} else if(typeof key === "object") {
+					// Setting attributes form object
+					for(v in key) {
+						elem.setAttribute(v, key[v]);
+					}
+				// Getting attribute
+				} else {
+					var attr = elem.getAttribute(key);
+					if(attr || attr === "0") {
+						attr = isNaN(attr)?attr:attr-0;
+					}
+
+					return attr;
+				}
+			} else {
+				return proxied.apply(this, arguments);
+			}
+		}
+		return this;
+	};
+
+}());
+
+
 function SvgCanvas(container)
 {
 var isOpera = !!window.opera,
@@ -36,7 +98,7 @@ var isOpera = !!window.opera,
 	"ellipse": ["class", "clip-path", "clip-rule", "cx", "cy", "fill", "fill-opacity", "fill-rule", "filter", "id", "mask", "opacity", "requiredFeatures", "rx", "ry", "stroke", "stroke-dasharray", "stroke-dashoffset", "stroke-linecap", "stroke-linejoin", "stroke-miterlimit", "stroke-opacity", "stroke-width", "style", "systemLanguage", "transform"],
 	"feGaussianBlur": ["class", "id", "requiredFeatures", "stdDeviation"],
 	"filter": ["class", "filterRes", "filterUnits", "height", "id", "primitiveUnits", "requiredFeatures", "width", "x", "xlink:href", "y"],
-	"foreignObject": ["class", "height", "id", "markdown", "requiredFeatures", "style", "width", "x", "y"],
+	"foreignObject": ["class", "font-size", "height", "id", "markdown", "opacity", "requiredFeatures", "style", "width", "x", "y"],
 	"g": ["class", "clip-path", "clip-rule", "id", "display", "fill", "fill-opacity", "fill-rule", "filter", "mask", "opacity", "requiredFeatures", "stroke", "stroke-dasharray", "stroke-dashoffset", "stroke-linecap", "stroke-linejoin", "stroke-miterlimit", "stroke-opacity", "stroke-width", "style", "systemLanguage", "transform"],
 	"image": ["class", "clip-path", "clip-rule", "filter", "height", "id", "mask", "opacity", "requiredFeatures", "style", "systemLanguage", "transform", "width", "x", "xlink:href", "xlink:title", "y"],
 	"line": ["class", "clip-path", "clip-rule", "fill", "fill-opacity", "fill-rule", "filter", "id", "marker-end", "marker-mid", "marker-start", "mask", "opacity", "requiredFeatures", "stroke", "stroke-dasharray", "stroke-dashoffset", "stroke-linecap", "stroke-linejoin", "stroke-miterlimit", "stroke-opacity", "stroke-width", "style", "systemLanguage", "transform", "x1", "x2", "y1", "y2"],
@@ -911,26 +973,27 @@ function BatchCommand(text) {
 		idprefix = "svg_",
 		svgdoc  = container.ownerDocument,
 		svgroot = svgdoc.createElementNS(svgns, "svg");
-	svgroot.setAttribute("width", 640);
+
-	svgroot.setAttribute("height", 480);
+	$(svgroot).attr({
-	svgroot.setAttribute("id", "svgroot");
+		width: 640,
-	svgroot.setAttribute("xmlns", svgns);
+		height: 480,
-	svgroot.setAttribute("xmlns:xlink", xlinkns);
+		id: "svgroot",
-	container.appendChild(svgroot);
+		xmlns: svgns,
+		"xmlns:xlink": xlinkns
+	}).appendTo(container);
+	
 	var svgcontent = svgdoc.createElementNS(svgns, "svg");
-	svgcontent.setAttribute('id', 'svgcontent');
+	$(svgcontent).attr({
-// 	svgcontent.setAttribute('viewBox', '0 0 640 480');
+		id: 'svgcontent',
-	svgcontent.setAttribute('width', '640');
+		width: 640,
-	svgcontent.setAttribute('height', '480');
+		height: 480,
-	svgcontent.setAttribute('x', '640');
+		x: 640,
-	svgcontent.setAttribute('y', '480');
+		y: 480,
-	svgcontent.setAttribute('overflow', 'visible');
+		overflow: 'visible',
-	
+		xmlns: svgns,
-	
+		"xmlns:xlink": xlinkns
-	svgcontent.setAttribute("xmlns", svgns);
+	}).appendTo(svgroot);
-	svgcontent.setAttribute("xmlns:xlink", xlinkns);
+
-	svgroot.appendChild(svgcontent);
-	
 	(function() {
 		// TODO: make this string optional and set by the client
 		var comment = svgdoc.createComment(" Created with SVG-edit - http://svg-edit.googlecode.com/ ");
@@ -1518,6 +1581,7 @@ function BatchCommand(text) {
 				changes["rx"] = scalew(changes["rx"]);
 				changes["ry"] = scaleh(changes["ry"]);
 				break;
+			case "foreignObject":
 			case "rect":
 			case "image":
 				var pt1 = remap(changes["x"],changes["y"]);
@@ -1631,6 +1695,7 @@ function BatchCommand(text) {
 		// TODO: merge this switch with the above one and optimize
 		switch (selected.tagName)
 		{
+			case "foreignObject":
 			case "rect":
 			case "image":
 				changes.x = changes.x-0 + Math.min(0,changes.width);
@@ -1771,6 +1836,7 @@ function BatchCommand(text) {
 				changes["rx"] = selected.getAttribute("rx");
 				changes["ry"] = selected.getAttribute("ry");
 				break;
+			case "foreignObject":
 			case "rect":
 			case "image":
 				changes["width"] = selected.getAttribute("width");
@@ -3066,6 +3132,8 @@ function BatchCommand(text) {
 					shape.setAttributeNS(null, "y2", y);
 					if (!window.opera) svgroot.unsuspendRedraw(handle);
 					break;
+				case "foreignObject":
+					// fall through
 				case "square":
 					// fall through
 				case "rect":
@@ -3274,6 +3342,7 @@ function BatchCommand(text) {
 // 							element.y1.baseVal.value != element.y2.baseVal.value);
 					keep = (element.getAttribute('x1') != element.getAttribute('x2') || element.getAttribute('y1') != element.getAttribute('y2'));
 					break;
+				case "foreignObject":
 				case "square":
 				case "rect":
 					// keep = (element.width.baseVal.value && element.height.baseVal.value);
@@ -5372,6 +5441,7 @@ function BatchCommand(text) {
 			
 			// determine proper size
 			var w, h;
+			var min_x = min_y = 0;
 			if (svgcontent.getAttribute("viewBox")) {
 				var vb = svgcontent.getAttribute("viewBox").split(' ');
 				w = vb[2];
@@ -6053,9 +6123,10 @@ function BatchCommand(text) {
 		}
 
 		if (elems.length > 0) {
-			if (!preventUndo) 
+			if (!preventUndo) {
 				this.changeSelectedAttribute("stroke", val, elems);
-			else 
+				call("changed", elems);
+			} else 
 				this.changeSelectedAttributeNoUndo("stroke", val, elems);
 		}
 	};
@@ -6081,9 +6152,10 @@ function BatchCommand(text) {
 			}
 		}
 		if (elems.length > 0) {
-			if (!preventUndo) 
+			if (!preventUndo) {
 				this.changeSelectedAttribute("fill", val, elems);
-			else
+				call("changed", elems);
+			} else
 				this.changeSelectedAttributeNoUndo("fill", val, elems);
 		}
 	};
@@ -7467,7 +7539,7 @@ function BatchCommand(text) {
 	// Function: getVersion
 	// Returns a string which describes the revision number of SvgCanvas.
 	this.getVersion = function() {
-		return "svgcanvas.js ($Rev: 1352 $)";
+		return "svgcanvas.js ($Rev: 1355 $)";
 	};
 	
 	this.setUiStrings = function(strs) {

public/svg-edit/extensions/ext-arrows.js

@@ -6,6 +6,7 @@
  * Copyright(c) 2010 Alexis Deveria
  *
  */
+
  
 $(function() {
 	svgCanvas.addExtension("Arrows", function(S) {
@@ -22,7 +23,20 @@ $(function() {
 			]
 		};
 		
-	
+		var pathdata = {
+			fw: {d:"m0,0l10,5l-10,5l5,-5l-5,-5z", refx:8, id:"se_arrow_fw"},
+			bk: {d:"m10,0l-10,5l10,5l-5,-5l5,-5z", refx:2, id:"se_arrow_bk"}
+		}
+		function getLinked(elem, attr) {
+			var str = elem.getAttribute(attr);
+			if(!str) return null;
+			var m = str.match(/\(\#(.*)\)/);
+			if(!m || m.length !== 2) {
+				return null;
+			}
+			return S.getElem(m[1]);
+		}
+		
 		function showPanel(on) {
 			$('#arrow_panel').toggle(on);
 			
@@ -61,16 +75,13 @@ $(function() {
 			el.removeAttribute("marker-end");
 		}
 		
-		function addMarker(id, type) {
+		function addMarker(dir, type, id) {
 			// TODO: Make marker (or use?) per arrow type, since refX can be different
+			id = id || 'se_arrow_' + dir;
+			
 			var marker = S.getElem(id);
 
-			var pathdata = {
+			var data = pathdata[dir];
-				se_arrow_fw: {d:"m0,0l10,5l-10,5l5,-5l-5,-5z", refx:8},
-				se_arrow_bk: {d:"m10,0l-10,5l10,5l-5,-5l5,-5z", refx:2}
-			}
-			
-			var data = pathdata[id];
 			
 			if(type == "mid") {
 				data.refx = 5;
@@ -86,14 +97,15 @@ $(function() {
 						"markerUnits": "strokeWidth",
 						"markerWidth": 5,
 						"markerHeight": 5,
-						"orient": "auto"
+						"orient": "auto",
+						"style": "pointer-events:none" // Currently needed for Opera
 					}
 				});
 				var arrow = addElem({
 					"element": "path",
 					"attr": {
 						"d": data.d,
-						"fill": "#000"
+						"fill": "#000000"
 					}
 				});
 				marker.appendChild(arrow);
@@ -101,6 +113,8 @@ $(function() {
 			} 
 			
 			marker.setAttribute('refX', data.refx);
+			
+			return marker;
 		}
 		
 		function setArrow() {
@@ -111,28 +125,83 @@ $(function() {
 				return;
 			}
 		
-			var fw_id = "se_arrow_fw";
-			var bk_id = "se_arrow_bk";
-			
 			// Set marker on element
-			var id = fw_id;
+			var dir = "fw";
 			if(type == "mid_bk") {
 				type = "mid";
-				id = bk_id;
+				dir = "bk";
 			} else if(type == "both") {
-				addMarker(bk_id, type);
+				addMarker("bk", type);
-				svgCanvas.changeSelectedAttribute("marker-start", "url(#" + bk_id + ")");
+				svgCanvas.changeSelectedAttribute("marker-start", "url(#" + pathdata.bk.id + ")");
 				type = "end";
-				id = fw_id;
+				dir = "fw";
 			} else if (type == "start") {
-				id = bk_id;
+				dir = "bk";
 			}
 			
-			addMarker(id, type);
+			addMarker(dir, type);
-			svgCanvas.changeSelectedAttribute("marker-"+type, "url(#" + id + ")");
+			svgCanvas.changeSelectedAttribute("marker-"+type, "url(#" + pathdata[dir].id + ")");
 			S.call("changed", selElems);
 		}
 		
+		function colorChanged(elem) {
+			var color = elem.getAttribute('stroke');
+			
+			var mtypes = ['start','mid','end'];
+			var defs = S.findDefs();
+			
+			$.each(mtypes, function(i, type) {
+				var marker = getLinked(elem, 'marker-'+type);
+				if(!marker) return;
+				
+				var cur_color = $(marker).children().attr('fill');
+				var cur_d = $(marker).children().attr('d');
+				var new_marker = null;
+				if(cur_color === color) return;
+				
+				var all_markers = $(defs).find('marker');
+				// Different color, check if already made
+				all_markers.each(function() {
+					var attrs = $(this).children().attr(['fill', 'd']);
+					if(attrs.fill === color && attrs.d === cur_d) {
+						// Found another marker with this color and this path
+						new_marker = this;
+					}
+				});
+				
+				if(!new_marker) {
+					// Create a new marker with this color
+					var last_id = marker.id;
+					var dir = last_id.indexOf('_fw') !== -1?'fw':'bk';
+					
+					new_marker = addMarker(dir, type, 'se_arrow_' + dir + all_markers.length);
+
+					$(new_marker).children().attr('fill', color);
+				}
+				
+				$(elem).attr('marker-'+type, "url(#" + new_marker.id + ")");
+				
+				// Check if last marker can be removed
+				var remove = true;
+				$(S.svgcontent).find('line, polyline, path, polygon').each(function() {
+					var elem = this;
+					$.each(mtypes, function(j, mtype) {
+						if($(elem).attr('marker-' + mtype) === "url(#" + marker.id + ")") {
+							return remove = false;
+						}
+					});
+					if(!remove) return false;
+				});
+				
+				// Not found, so can safely remove
+				if(remove) {
+					$(marker).remove();
+				}
+
+			});
+			
+		}
+		
 		return {
 			name: "Arrows",
 			context_tools: [{
@@ -181,6 +250,21 @@ $(function() {
 						showPanel(false);
 					}
 				}
+			},
+			elementChanged: function(opts) {
+				var elem = opts.elems[0];
+				if(elem && (
+					elem.getAttribute("marker-start") ||
+					elem.getAttribute("marker-mid") ||
+					elem.getAttribute("marker-end")
+				)) {
+	// 								var start = elem.getAttribute("marker-start");
+	// 								var mid = elem.getAttribute("marker-mid");
+	// 								var end = elem.getAttribute("marker-end");
+					// Has marker, so see if it should match color
+					colorChanged(elem);
+				}
+				
 			}
 		};
 	});