30:T9a4,{ let doc; if (!this) { const text = await FileAttachment("example@5.svg").text(); doc = html`

${text}

`; [54, 55, 56, 57, 58].forEach(nth => { const el = doc.querySelector(`svg > g > path:nth-child(${nth})`); el.setAttribute('opacity', 0); el.setAttribute('fill-opacity', 0); }); } else { doc = this; } [37, 38, 39, 40, 41, 42, 43].forEach(nth => { const el = doc.querySelector(`svg > g > *:nth-child(${nth})`); if (nth !== 40) { el.setAttribute('stroke', highlight.locals ? '#ffeca9' : '#000'); } el.setAttribute('fill', highlight.locals ? '#ffeca9' : '#000'); el.setAttribute('opacity', highlight.enter ? 0 : 1); }); [54, 55, 56, 57, 58].forEach(nth => { const el = doc.querySelector(`svg > g > *:nth-child(${nth})`); el.setAttribute('stroke', highlight.enter ? '#c7e8ac' : '#000'); if (nth == 55 || nth == 57) { el.setAttribute('fill', highlight.enter ? '#c7e8ac' : '#000'); } el.setAttribute('opacity', highlight.enter ? 1 : 0); el.setAttribute('fill-opacity', highlight.enter ? 1 : 0); }); [44, 45, 46, 47, 48, 49, 27, 28, 29, 30, 31, 32, 25, 26].forEach(nth => { const el = doc.querySelector(`svg > g > *:nth-child(${nth})`); el.setAttribute('stroke', highlight.enter ? '#c7e8ac' : '#000'); if (nth !== 44 && nth !== 30) { el.setAttribute('fill', highlight.enter ? '#c7e8ac' : '#000'); } }); [18].forEach(nth => { const el = doc.querySelector(`svg > g > path:nth-child(${nth})`); el.setAttribute('fill', highlight.ssh ? '#c1e4f7' : '#fff'); }); [50].forEach(nth => { const el = doc.querySelector(`svg > g > path:nth-child(${nth})`); el.setAttribute('fill', highlight.host ? '#f9d2de' : '#fff'); el.setAttribute('fill-opacity', highlight.host ? 1 : 0); }); [ { nth: 35, key: 'locals' }, { nth: 33, key: 'locals' }, { nth: 10, key: 'remote' }, { nth: 6, key: 'remote' } ].forEach(({ nth, key, color }) => { const el = doc.querySelector(`svg > g > path:nth-child(${nth})`); if (highlight.enter) { el.setAttribute('fill', '#c7e8ac'); } else if (highlight.locals) { el.setAttribute('fill', key === 'locals' ? '#ffeca9' : '#fff'); } else if (highlight.remote) { el.setAttribute('fill', key === 'remote' ? '#d1bcd2' : '#fff'); } else { el.setAttribute('fill', '#fff'); } }); return doc; }31:[{"id":"4badaae63dcb754e78f27f5d38e536bbfdaa8d69b2d6d95d49a851ad5b3419cb900292664419349c8ba2d863ebe17587c6b017955e21ba4f9fdf77e4056711b8","href":"https://static.observableusercontent.com/files/4badaae63dcb754e78f27f5d38e536bbfdaa8d69b2d6d95d49a851ad5b3419cb900292664419349c8ba2d863ebe17587c6b017955e21ba4f9fdf77e4056711b8","name":"example@5.svg","type":"image/svg+xml","lastModified":1584294288045.972,"size":20538}] 2e:{"title":"Interactive SVG","cells":[{"id":0,"value":"md`# Interactive SVG\n\nwhich is exported from [Lucidchart](https://lucidchart.com)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"html`

$ ${highlighter('ssh', viewof highlight)} -L ${highlighter(\n  '4369',\n  viewof highlight,\n  'remote'\n)}:${highlighter(\n  'localhost:4369',\n  viewof highlight,\n  'locals'\n)} -L ${highlighter('53083', viewof highlight, 'remote')}:${highlighter(\n  'locahost:53083',\n  viewof highlight,\n  'locals'\n)} -T ${highlighter(\n  'worker.myapp.com',\n  viewof highlight,\n  'host'\n)}

${highlighter(\n 'Enter',\n viewof highlight,\n 'enter'\n)}\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":175,"value":"md`---\n\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"viewof highlight = new View({})","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"highlighter = (text, view, key = text) => {\n const el = text.startsWith('<')\n ? html`${text}`\n : html`${text}`;\n el.addEventListener('mouseover', () => {\n view.value = { ...view.value, [key]: true };\n });\n el.addEventListener('mouseout', () => {\n view.value = { ...view.value, [key]: false };\n });\n return el;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"import { View } from '@mbostock/synchronized-views'","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}