30:T458,31:[] 2e:{"title":"Recursos úteis na construção de SVG","cells":[{"id":0,"value":"# Recursos úteis na construção de SVG\nReferências e códigos utilizados como exemplos na apresentação do Noite de Processing, 31/05/2022","pinned":false,"hidden":false,"mode":"md"},{"id":124,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":9,"value":"Arquivos `.svg`, assim como as tags `
\n## SVG + CSS\nUm dos recursos mais interessantes no uso de **SVG** é que podemos declarar as propriedades dos elementos através do código **CSS**:","pinned":false,"hidden":false,"mode":"md"},{"id":19,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":23,"value":"Neste exemplo, tanto as propriedades de tamanho e cor do retângulo de fundo são definidos por uma propriedade `style` na tag ``, quanto as propriedades da linha são definidos por uma classe CSS `minhalinha`, declarada na propriedade `class` da tag ``, e definidas dentro da tag `\n\n","pinned":true,"hidden":false,"mode":"html"},{"id":53,"value":"
\n## SVG + JS\n\n##### Atenção: O Observable não é capaz de rodar códigos javascript inseridos via `","pinned":true,"hidden":false,"mode":"md"},{"id":57,"value":"Considerando que uma tag ou o código **SVG** é apenas uma `String`, é possível modificar o que está contido em um elemento **SVG** injetando nele o código que se deseja:","pinned":false,"hidden":false,"mode":"md"},{"id":77,"value":"\n\n","pinned":true,"hidden":false,"mode":"html"},{"id":79,"value":"Versão adaptada para o Observable:","pinned":false,"hidden":false,"mode":"md"},{"id":71,"value":"html`${injectsvg()}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":59,"value":"injectsvg = function () {\n let conteudo = ``;\n\n return conteudo;\n}","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}