SVG - Revision history

Tacoball at 06:38, 23 September 2026

2026-09-23T06:38:09Z

← Older revision		Revision as of 06:38, 23 September 2026
Line 12:		Line 12:

	= Better approach to trigger an event =		= Better approach to trigger an event =
	<~~source~~ lang="vue">		<syntaxhighlight lang="vue">
	<template lang="pug">		<template lang="pug">
	<svg>		<svg>
Line 30:		Line 30:
	}		}
	</script>		</script>
	</~~source~~>		</syntaxhighlight>

	= 常用換算 =		= 常用換算 =
Line 37:		Line 37:
	\|-		\|-
	\| Get width of <text> element. \|\|		\| Get width of <text> element. \|\|
	<~~source~~ lang="js">		<syntaxhighlight lang="js">
	Math.max.apply(null, d3.selectAll("text").nodes().map((e) => { return e.getBBox().width; }))		Math.max.apply(null, d3.selectAll("text").nodes().map((e) => { return e.getBBox().width; }))
	</~~source~~>		</syntaxhighlight>
	\|}		\|}

Line 47:		Line 47:
	\|-		\|-
	\| 陰影特效 \|\|		\| 陰影特效 \|\|
	<~~source~~ lang="xml">		<syntaxhighlight lang="xml">
	<filter id="dropShadow">		<filter id="dropShadow">
	<feGaussianBlur in="SourceAlpha" stdDeviation="3" />		<feGaussianBlur in="SourceAlpha" stdDeviation="3" />
Line 53:		Line 53:
	<feBlend in="SourceGraphic" />		<feBlend in="SourceGraphic" />
	</filter>		</filter>
	</~~source~~>		</syntaxhighlight>
	\|}		\|}

Line 61:		Line 61:
	\|-		\|-
	\| 相對定位 \|\|		\| 相對定位 \|\|
	<~~source~~ lang="html5">		<syntaxhighlight lang="html5">
	<g transform="translate(X Y)"></g>		<g transform="translate(X Y)"></g>
	</~~source~~>		</syntaxhighlight>
	\|-		\|-
	\| 以 (X, Y) 為原點，轉換笛卡兒座標系 \|\|		\| 以 (X, Y) 為原點，轉換笛卡兒座標系 \|\|
	<~~source~~ lang="html5">		<syntaxhighlight lang="html5">
	<g transform="translate(X Y) scale(1 -1)"></g>		<g transform="translate(X Y) scale(1 -1)"></g>
	</~~source~~>		</syntaxhighlight>
	\|-		\|-
	\| 在笛卡兒座標系中的指定位置顯示文字<br/>(用 x, y 屬性會上下顛倒) \|\|		\| 在笛卡兒座標系中的指定位置顯示文字<br/>(用 x, y 屬性會上下顛倒) \|\|
	<~~source~~ lang="html5">		<syntaxhighlight lang="html5">
	<!-- 方法 1 -->		<!-- 方法 1 -->
	<text transform="translate(X Y) scale(1 -1)">fuck</text>		<text transform="translate(X Y) scale(1 -1)">fuck</text>
Line 81:		Line 81:
	<text transform="translate(X2 -Y2)">fuck 2</text>		<text transform="translate(X2 -Y2)">fuck 2</text>
	</g>		</g>
	</~~source~~>		</syntaxhighlight>
	\|}		\|}

	= 扇形繪圖法 =		= 扇形繪圖法 =
	<~~source~~ lang="xml">		<syntaxhighlight lang="xml">
	<path d="m 160 160 l 0 -150 a 150 150 0 0 1 150 150 z" />		<path d="m 160 160 l 0 -150 a 150 150 0 0 1 150 150 z" />
	<path d="m 160 160 l 0 -150 a 150 150 0 1 0 150 150 z" />		<path d="m 160 160 l 0 -150 a 150 150 0 1 0 150 150 z" />
	</~~source~~>		</syntaxhighlight>
	這個畫法從圓心出發，畫直線到第一個點，再順時針畫弧線，最後畫一直線回圓心，其中 a 指令的部分比較難		這個畫法從圓心出發，畫直線到第一個點，再順時針畫弧線，最後畫一直線回圓心，其中 a 指令的部分比較難

Line 116:		Line 116:
	\| 半徑寬高比		\| 半徑寬高比
	\|}		\|}
	<~~source~~ lang="javascript">		<syntaxhighlight lang="javascript">
	// 畫扇形		// 畫扇形
	var r = 120;		var r = 120;
Line 142:		Line 142:
	"style": "stroke:#ffffff; stroke-width:2; fill: #000077"		"style": "stroke:#ffffff; stroke-width:2; fill: #000077"
	});		});
	</~~source~~>		</syntaxhighlight>

	== 立體扇形製圖技巧 ==		== 立體扇形製圖技巧 ==

Tacoball: /* 常用換算 */

2018-08-06T10:26:36Z

常用換算

← Older revision		Revision as of 10:26, 6 August 2018
Line 33:		Line 33:

	= 常用換算 =		= 常用換算 =
			{\| class="wikitable"
			! TODO \|\| Code
			\|-
			\| Get width of <text> element. \|\|
	<source lang="js">		<source lang="js">
	Math.max.apply(null, d3.selectAll("text").nodes().map((e) => { return e.getBBox().width; }))		Math.max.apply(null, d3.selectAll("text").nodes().map((e) => { return e.getBBox().width; }))
	</source>		</source>
			\|}

	= 常用濾鏡 =		= 常用濾鏡 =

Tacoball: /* 常用換算 */

2018-08-06T10:25:13Z

常用換算

← Older revision		Revision as of 10:25, 6 August 2018
Line 33:		Line 33:

	= 常用換算 =		= 常用換算 =
			<source lang="js">
	Math.max.apply(null, d3.selectAll("text").nodes().map((e) => { return e.getBBox().width; }))		Math.max.apply(null, d3.selectAll("text").nodes().map((e) => { return e.getBBox().width; }))
			</source>

	= 常用濾鏡 =		= 常用濾鏡 =

Tacoball: /* Better approach to trigger an event */

2018-08-06T10:23:05Z

Better approach to trigger an event

← Older revision		Revision as of 10:23, 6 August 2018
Line 13:		Line 13:
	= Better approach to trigger an event =		= Better approach to trigger an event =
	<source lang="vue">		<source lang="vue">
			<template lang="pug">
	<svg>		<svg>
	<g @click="~~onClick~~">		<g @click="onClickShape">
	~~...~~		<!-- shape to receive click event -->
	</g>		</g>
	</svg>		</svg>
			</template>

			<script>
			export default {
			methods: {
			onClickShape (e) {
			// TODO: Do something ...
			}
			}
			}
			</script>
	</source>		</source>

Tacoball: /* Better approach to trigger an event */

2018-08-06T10:21:26Z

Better approach to trigger an event

← Older revision		Revision as of 10:21, 6 August 2018
Line 12:		Line 12:

	= Better approach to trigger an event =		= Better approach to trigger an event =
			<source lang="vue">
			<svg>
			<g @click="onClick">
			...
			</g>
			</svg>
			</source>

	= 常用換算 =		= 常用換算 =

Tacoball at 06:44, 6 August 2018

2018-08-06T06:44:56Z

← Older revision		Revision as of 06:44, 6 August 2018
Line 10:		Line 10:
	\|}		\|}
	https://stackoverflow.com/questions/43961807/svg-use-not-working-in-safari		https://stackoverflow.com/questions/43961807/svg-use-not-working-in-safari

			= Better approach to trigger an event =

	= 常用換算 =		= 常用換算 =

Tacoball: /* Compatibility of Browsers */

2018-08-02T02:54:37Z

Compatibility of Browsers

← Older revision		Revision as of 02:54, 2 August 2018
Line 5:		Line 5:
	\| <text alignment-baseline="..."> \|\| O \|\| ? \|\| X \|\| ?		\| <text alignment-baseline="..."> \|\| O \|\| ? \|\| X \|\| ?
	\|-		\|-
	\| <use href="..."~~> from another <svg~~> \|\| O \|\| ? \|\| O \|\| X		\| <use href="..."> \|\| O \|\| ? \|\| O \|\| X
	\|-		\|-
	\| <use xlink:href="...."~~> from another <svg~~> \|\| O \|\| O \|\| O \|\| O		\| <use xlink:href="...."> \|\| O \|\| O \|\| O \|\| O
	\|}		\|}
	https://stackoverflow.com/questions/43961807/svg-use-not-working-in-safari		https://stackoverflow.com/questions/43961807/svg-use-not-working-in-safari

Tacoball: /* Compatibility of Browsers */

2018-08-02T02:54:12Z

Compatibility of Browsers

← Older revision		Revision as of 02:54, 2 August 2018
Line 5:		Line 5:
	\| <text alignment-baseline="..."> \|\| O \|\| ? \|\| X \|\| ?		\| <text alignment-baseline="..."> \|\| O \|\| ? \|\| X \|\| ?
	\|-		\|-
	\| <use> from another <svg> \|\| O \|\| ? \|\| O \|\| X		\| <use href="..."> from another <svg> \|\| O \|\| ? \|\| O \|\| X
			\|-
			\| <use xlink:href="...."> from another <svg> \|\| O \|\| O \|\| O \|\| O
	\|}		\|}
			https://stackoverflow.com/questions/43961807/svg-use-not-working-in-safari

	= 常用換算 =		= 常用換算 =

Tacoball: /* Compatibility of Browsers */

2018-08-01T03:56:03Z

Compatibility of Browsers

← Older revision		Revision as of 03:56, 1 August 2018
Line 3:		Line 3:
	! \|\| Chrome \|\| Edge \|\| Firefox \|\| Safari		! \|\| Chrome \|\| Edge \|\| Firefox \|\| Safari
	\|-		\|-
	\| text alignment-baseline \|\| O \|\| ? \|\| X \|\| ?		\| <text alignment-baseline="..."> \|\| O \|\| ? \|\| X \|\| ?
	\|-		\|-
	\| use from another <svg> \|\| O \|\| ? \|\| O \|\| X		\| <use> from another <svg> \|\| O \|\| ? \|\| O \|\| X
	\|}		\|}

Tacoball: /* Compatibility of Browsers */

2018-08-01T03:55:29Z

Compatibility of Browsers

← Older revision		Revision as of 03:55, 1 August 2018
Line 4:		Line 4:
	\|-		\|-
	\| text alignment-baseline \|\| O \|\| ? \|\| X \|\| ?		\| text alignment-baseline \|\| O \|\| ? \|\| X \|\| ?
			\|-
			\| use from another <svg> \|\| O \|\| ? \|\| O \|\| X
	\|}		\|}