2c:null 2d:["$","title",null,{"children":"My first SVG | ちず | Observable"}] 32:T6d4,{ const width = 800; const height = 600; const x = 150; const y = 200; const r = 100; const sw = 25; const svg = d3.create("svg").attr("width", width).attr("height", height); svg //1-1 .append("circle") .attr("cx", x) .attr("cy", y) .attr("r", r) .attr("fill", "rgba(255, 255, 0, 0.80)") .attr("stroke", "rgba(255, 0, 0, 0.80)") .attr("stroke-width", sw) .attr("stroke-opacity", 0.8); svg //1-2 .append("circle") .attr("cx", x + 250) .attr("cy", y) .attr("r", r) .attr("fill", "rgba(255, 255, 0, 0.60)") .attr("stroke", "rgba(255, 0, 0, 0.60)") .attr("stroke-width", sw) .attr("stroke-opacity", 0.6); svg //1-3 .append("circle") .attr("cx", x + 250 + 250) .attr("cy", y) .attr("r", r) .attr("fill", "rgba(255, 255, 0, 0.40)") .attr("stroke", "rgba(255, 0, 0, 0.40)") .attr("stroke-width", sw) .attr("stroke-opacity", 0.4); svg //2-1 .append("circle") .attr("cx", x + 120) .attr("cy", y + 100) .attr("r", r) .attr("fill", "rgba(255, 255, 0, 0.70)") .attr("stroke", "rgba(255, 0, 0, 0.70)") .attr("stroke-width", sw) .attr("stroke-opacity", 0.7); svg //2-2 .append("circle") .attr("cx", x + 250 + 120) .attr("cy", y + 100) .attr("r", r) .attr("fill", "rgba(255, 255, 0, 0.50)") .attr("stroke", "rgba(255, 0, 0, 0.50)") .attr("stroke-width", sw) .attr("stroke-opacity", 0.5); svg //3-1 .append("circle") .attr("cx", x + 250) .attr("cy", y + 100 + 100) .attr("r", r) .attr("fill", "rgba(255, 255, 0, 0.60)") .attr("stroke", "rgba(255, 0, 0, 0.60)") .attr("stroke-width", sw) .attr("stroke-opacity", 0.6); return svg.node(); }33:[] 30:{"id":"92a79b5fcae9fc3d","slug":"svg_practice_2021","title":"My first SVG","thumbnail":"225f3a054591f17bbe18b0c8c69c856210f08ee1d639ab95993e38d4367c7bec","access_level":"unlisted","create_time":"$D2021-11-05T06:56:42.164Z","update_time":"$D2021-11-11T16:39:51.490Z","view_time":null,"first_public_time":null,"has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"7ef19f708c3c371b","login":"chizu1819","name":"ちず","avatar_url":"https://avatars-next.observableusercontent.com/34aed719ae0876960e475325a2c41ef0020490180269b4b38d141e9f83c6d247","tier":"starter_2024"},"version":216,"publish_version":216,"role":null,"authored":false,"authors":[{"type":"individual","id":"d84183cbfb9d0e69","login":"chizu1819","name":"ちず","avatar_url":"https://avatars-next.observableusercontent.com/34aed719ae0876960e475325a2c41ef0020490180269b4b38d141e9f83c6d247","tier":null}],"members":[{"type":"individual","id":"d84183cbfb9d0e69","login":"chizu1819","name":"ちず","avatar_url":"https://avatars-next.observableusercontent.com/34aed719ae0876960e475325a2c41ef0020490180269b4b38d141e9f83c6d247","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"My first SVG","cells":[{"id":0,"value":"# My first SVG","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":212,"value":"11/12　SVG練習問題","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"svg``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"### https://observablehq.com/@sugi2000lab/2021-11-05-svg\nより↓","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":198,"value":"svg``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":200,"value":"svg``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":202,"value":"svg``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":204,"value":"svg``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":206,"value":"svg``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":208,"value":"svg``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"svg``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"svg``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"円が三重に見えているのは、stroke-width の太さは円周の外側に 10 ピクセルではなく、\n円周を中心に外側に 5 ピクセル、内側に 5 ピクセルずつ広がっていて（合計 10 ピクセル)、内側が fill の色と重なっているためです。","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"svg``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"3つ目の円の opacity は 0.2、つまり 20% です。 \nしかし紫色の fill にはすでにアルファ値として 0.75、つまり 75% が設定されています。 \nその結果、最終的な透明度は、0.2 と 0.75 の積で 0.15、すなわち 15% になります。","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 31:"$30:body"