css - 需要所有 SVG 属性值的 JSON 格式表格

Question

我正在编写一个用于编辑 SVG 属性的模块，我需要能够提供属性值建议和验证。我需要一个从属性名称到机器可读形式(例如 JSON)的可能值(或值类型)的映射。

我设法从这里为演示属性提取了这样一个映射: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Presentation

但是，我还没有找到所有其他属性的方便来源，例如此处列出的:https://www.w3.org/TR/SVG/attindex.html

这是表示属性的 JSON 对象，以防它对其他人有用(类型用 * 表示):

{
    "alignment-baseline": ["auto", "baseline", "before-edge", "text-before-edge", "middle", "central", "after-edge", "text-after-edge", "ideographic", "alphabetic", "hanging", "mathematical", "inherit"],
    "baseline-shift": ["auto", "baseline", "super", "sub", "inherit"],
    "clip-path": ["none", "inherit"],
    "clip-rule": ["nonezero", "evenodd", "inherit"],
    "color": ["*color", "inherit"],
    "color-interpolation": ["auto", "sRGB", "linearRGB", "inherit"],
    "color-interpolation-filters": ["auto", "sRGB", "linearRGB", "inherit"],
    "color-profile": ["auto", "sRGB", "linearRGB", "inherit", "*name"],
    "color-rendering": ["auto", "optimizeSpeed", "optimizeQuality", "inherit"],
    "cursor": ["*FuncIRI", "inherit", "auto", "default", "none", "context-menu", "help", "pointer", "progress", "wait", "cell", "crosshair", "text", "vertical-text", "alias", "copy", "move", "no-drop", "not-allowed", "e-resize", "n-resize", "ne-resize", "nw-resize", "s-resize", "se-resize", "sw-resize", "w-resize", "ew-resize", "ns-resize", "nesw-resize", "nwse-resize", "col-resize", "row-resize", "all-scroll", "zoom-in", "zoom-out", "grab", "grabbing"],
    "direction": ["ltr", "rtl", "inherit"],
    "display": ["inherit", "none"],
    "dominant-baseline": ["auto", "text-bottom", "alphabetic", "ideographic", "middle", "central", "mathematical", "hanging", "text-top"],
    "enable-background": ["accumulate", "new", "inherit"],
    "fill": ["*paint"],
    "fill-opacity": ["*opacity-value", "*percentage"],
    "fill-rule": ["nonzero", "evenodd", "inherit"],
    "filter": ["*FuncIRI", "none", "inherit"],
    "flood-color": ["*color"],
    "flood-opacity": ["*number", "*percentage"],
    "font-family": ["*font-family"],
    "font-size": ["*font-size"],
    "font-size-adjust": ["none", "inherit"],
    "font-stretch": ["*font-stretch"],
    "font-style": ["normal", "italic", "oblique"],
    "font-variant": ["*font-variant"],
    "font-weight": ["normal", "bold", "lighter", "bolder", "100", "200", "300", "400", "500", "600", "700", "800", "900"],
    "glyph-orientation-horizontal": ["*angle", "inherit"],
    "glyph-orientation-vertical": ["auto", "*angle", "inherit"],
    "image-rendering": ["auto", "optimizeQuality", "optimizeSpeed"],
    "kerning": ["auto", "inherit"],
    "letter-spacing": ["normal", "inherit"],
    "lighting-color": ["*color"],
    "marker-end": ["*FuncIRI", "none", "inherit"],
    "marker-mid": ["*FuncIRI", "none", "inherit"],
    "marker-start": ["*FuncIRI", "none", "inherit"],
    "mask": ["*mask"],
    "opacity": ["*opacity-value", "*percentage"],
    "overflow": ["visible", "hidden", "scroll", "auto", "inherit"],
    "pointer-events": ["bounding-box", "visiblePainted", "visibleFil", "visibleStroke", "visible", "painted", "fill", "stroke", "all", "none"],
    "shape-rendering": ["auto", "optimizeSpeed", "crispEdges", "geometricPrecision", "inherit"],
    "stop-color": ["currentColor", "*color", "inherit"],
    "stop-opacity": ["*opacity-value", "inherit"],
    "stroke": ["*paint"],
    "stroke-dasharray": ["none", "*dasharray"],
    "stroke-dashoffset": ["*length", "*percentage"],
    "stroke-linecap": ["butt", "round", "square"],
    "stroke-linejoin": ["arcs", "bevel", "miter", "miter-clip", "round"],
    "stroke-opacity": ["*opacity-value", "*percentage"],
    "stroke-miterlimit": ["*number"],
    "stroke-width": ["*length", "*percentage"],
    "text-anchor": ["start", "middle", "end", "inherit"],
    "text-decoration": ["none", "underline", "overline", "line-through", "blink", "inherit"],
    "text-rendering": ["auto", "optimizeSpeed", "optimizeLegibility", "geometricPrecision", "inherit"],
    "vector-effect": ["none", "non-scaling-stroke", "inherit", "non-scaling-size", "non-rotation", "fixed-position"],
    "visibility": ["visible", "hidden", "collapse", "inherit"],
    "word-spacing": ["*length", "inherit"],
    "writing-mode": ["lr-tb", "rl-tb", "tb-rl", "lr", "rl", "tb", "inherit"]
}

Answer 1

我发现这个问题很有趣，因为我可能想做类似的事情。我使用您提供的页面中的代码和自定义 perl 脚本来提取信息。您可以在这个 WeTransfer link 中找到它.由于提取是自动的，您将需要与文档进行核对，可能会出现一些错误。