Extract props and values to JSON

readme.md

Definitions of various SVG options

• SVG text
• svg painting
• Gradients and Patterns
• Masking
• Filter effects
• Interact

extractPropsAndValues.js

// https://www.w3.org/TR/SVG/text.html#AlignmentBaselineProperty
var props = {}
Array.from(document.querySelectorAll('.propdef')).map(property => {
  const pn = property.querySelector('.propdef-title.prop-name');
  const propertyName = pn.innerText.replace(/[‘’]/ig, '');
  const options = property.querySelector('.propinfo tbody tr td:nth-child(2)').innerText.split(' | ');
 props[propertyName] = options;
})
let keys = Object.keys(props);
keys.map(key => {
	let variations = props[key];
	let vals = "";
	let newVariations = [];
	variations.map(variation => {
		let v = variation.replace(/[\[\] \n]/gi, "");
		var subVariations = v.split("||");
		if (subVariations.length > 1) {
			subVariations.map(v => {
				newVariations.push(v);
			});
		} else {
			var temp = v.split("|");
			if (temp.length > 1) {
				temp.map(v => {
					newVariations.push(v);
				});
			} else {
				newVariations.push(variation);
			}
		}
	});
	variations = newVariations.sort((a, b) => {
		return a > b ? 1 : -1;
	});
	variations.map(variation => {
		vals += `<div class="variation">${variation}</div>`;
	});
	props[key] = variations;
});

Object.keys(props).map(prop => {
  var value = props[prop];
  console.log(prop, value)
})
copy(JSON.stringify(props));

svg.filter.effects.json

// https://www.w3.org/TR/SVG/filters.html
{
    "filter": [
        "<funciri>",
        "inherit",
        "none"
    ],
    "enable-background": [
        "accumulate",
        "inherit",
        "new [ <x> <y> <width> <height> ]"
    ],
    "lighting-color": [
        "<color><icccolor>",
        "currentColor",
        "inherit"
    ],
    "flood-color": [
        "<color><icccolor>",
        "currentColor",
        "inherit"
    ],
    "flood-opacity": [
        "<opacity-value>",
        "inherit"
    ]
}

svg.gradientsPatterns.json

// https://www.w3.org/TR/SVG/pservers.html
{
    "stop-color": [
        "<color><icccolor>",
        "currentColor",
        "inherit"
    ],
    "stop-opacity": [
        "<opacity-value>",
        "inherit"
    ]
}

svg.interactivity.json

// https://www.w3.org/TR/SVG/interact.html
{
    "pointer-events": [
        "all",
        "fill",
        "inherit",
        "none",
        "painted",
        "stroke",
        "visible",
        "visibleFill",
        "visiblePainted",
        "visibleStroke"
    ],
    "cursor": [
        "[ [<funciri> ,]* [ auto",
        "crosshair",
        "default",
        "e-resize",
        "help ] ]",
        "inherit",
        "move",
        "n-resize",
        "ne-resize",
        "nw-resize",
        "pointer",
        "s-resize",
        "se-resize",
        "sw-resize",
        "text",
        "w-resize",
        "wait"
    ]
}

svg.masking.json

// https://www.w3.org/TR/SVG/masking.html
{
    "overflow": [
        "auto",
        "hidden",
        "inherit",
        "scroll",
        "visible"
    ],
    "clip": [
        "<shape>",
        "auto",
        "inherit"
    ],
    "clip-path": [
        "<funciri>",
        "inherit",
        "none"
    ],
    "clip-rule": [
        "evenodd",
        "inherit",
        "nonzero"
    ],
    "mask": [
        "<funciri>",
        "inherit",
        "none"
    ],
    "opacity": [
        "<opacity-value>",
        "inherit"
    ]
}

svg.painting.json

// https://www.w3.org/TR/SVG/painting.html
{
    "fill": [
        "<paint> (See Specifying paint)"
    ],
    "fill-rule": [
        "evenodd",
        "inherit",
        "nonzero"
    ],
    "fill-opacity": [
        "<opacity-value>",
        "inherit"
    ],
    "stroke": [
        "<paint> (See Specifying paint)"
    ],
    "stroke-width": [
        "<length>",
        "<percentage>",
        "inherit"
    ],
    "stroke-linecap": [
        "butt",
        "inherit",
        "round",
        "square"
    ],
    "stroke-linejoin": [
        "bevel",
        "inherit",
        "miter",
        "round"
    ],
    "stroke-miterlimit": [
        "<miterlimit>",
        "inherit"
    ],
    "stroke-dasharray": [
        "<dasharray>",
        "inherit",
        "none"
    ],
    "stroke-dashoffset": [
        "<length>",
        "<percentage>",
        "inherit"
    ],
    "stroke-opacity": [
        "<opacity-value>",
        "inherit"
    ],
    "display": [
        "block",
        "compact",
        "inherit",
        "inline",
        "inline-table",
        "list-item",
        "marker",
        "none",
        "run-in",
        "table",
        "table-caption",
        "table-cell",
        "table-column",
        "table-column-group",
        "table-footer-group",
        "table-header-group",
        "table-row",
        "table-row-group"
    ],
    "visibility": [
        "collapse",
        "hidden",
        "inherit",
        "visible"
    ],
    "marker-start": [
        "<funciri>",
        "inherit",
        "none"
    ],
    "marker": [
        "see individual properties"
    ],
    "color-interpolation": [
        "auto",
        "inherit",
        "linearRGB",
        "sRGB"
    ],
    "color-interpolation-filters": [
        "auto",
        "inherit",
        "linearRGB",
        "sRGB"
    ],
    "color-rendering": [
        "auto",
        "inherit",
        "optimizeQuality",
        "optimizeSpeed"
    ],
    "shape-rendering": [
        "auto",
        "crispEdges",
        "geometricPrecision",
        "inherit",
        "optimizeSpeed"
    ],
    "text-rendering": [
        "auto",
        "geometricPrecision",
        "inherit",
        "optimizeLegibility",
        "optimizeSpeed"
    ],
    "image-rendering": [
        "auto",
        "inherit",
        "optimizeQuality",
        "optimizeSpeed"
    ]
}

svg.text.json

// https://www.w3.org/TR/SVG/text.html
{
    "writing-mode": [
        "inherit",
        "lr",
        "lr-tb",
        "rl",
        "rl-tb",
        "tb",
        "tb-rl"
    ],
    "glyph-orientation-vertical": [
        "<angle>",
        "auto",
        "inherit"
    ],
    "glyph-orientation-horizontal": [
        "<angle>",
        "inherit"
    ],
    "direction": [
        "inherit",
        "ltr",
        "rtl"
    ],
    "unicode-bidi": [
        "bidi-override",
        "embed",
        "inherit",
        "normal"
    ],
    "text-anchor": [
        "end",
        "inherit",
        "middle",
        "start"
    ],
    "dominant-baseline": [
        "hanging",
        "auto",
        "alphabetic",
        "central",
        "ideographic",
        "inherit",
        "mathematical",
        "middle",
        "no-change",
        "reset-size",
        "text-after-edge",
        "text-before-edge",
        "use-script"
    ],
    "alignment-baseline": [
        "after-edge",
        "auto",
        "alphabetic",
        "baseline",
        "before-edge",
        "central",
        "hanging",
        "ideographic",
        "inherit",
        "mathematical",
        "middle",
        "text-after-edge",
        "text-before-edge"
    ],
    "baseline-shift": [
        "<length>",
        "<percentage>",
        "baseline",
        "inherit",
        "sub",
        "super"
    ],
    "font-family": [
        "<family-name>",
        "<generic-family>",
        "<generic-family>,*<family-name>",
        "inherit"
    ],
    "font-style": [
        "inherit",
        "italic",
        "normal",
        "oblique"
    ],
    "font-variant": [
        "inherit",
        "normal",
        "small-caps"
    ],
    "font-weight": [
        "400",
        "inherit",
        "bolder",
        "900",
        "100",
        "200",
        "300",
        "bold",
        "500",
        "600",
        "700",
        "800",
        "lighter",
        "normal"
    ],
    "font-stretch": [
        "semi-condensed",
        "inherit",
        "extra-expanded",
        "expanded",
        "extra-condensed",
        "condensed",
        "narrower",
        "normal",
        "semi-expanded",
        "ultra-condensed",
        "ultra-expanded",
        "wider"
    ],
    "font-size": [
        "<absolute-size>",
        "<length>",
        "<percentage>",
        "<relative-size>",
        "inherit"
    ],
    "font-size-adjust": [
        "<number>",
        "inherit",
        "none"
    ],
    "font": [
        "<'font-style'>",
        "<'font-variant'>",
        "<'font-weight'>?<'font-size'>/<'line-height'>?<'font-family'>|caption",
        "icon",
        "inherit",
        "menu",
        "message-box",
        "small-caption",
        "status-bar"
    ],
    "kerning": [
        "<length>",
        "auto",
        "inherit"
    ],
    "letter-spacing": [
        "<length>",
        "inherit",
        "normal"
    ],
    "word-spacing": [
        "<length>",
        "inherit",
        "normal"
    ],
    "text-decoration": [
        "blink",
        "inherit",
        "line-through",
        "none",
        "overline",
        "underline"
    ]
}