我正在编写一个用于编辑 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"]
}

#1楼 票数:0

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

  ask by Vakarelov translate from so

未解决问题?本站智能推荐:

1回复

使用JavaScript和JSON构造内联SVG图

我目前正在从事一个涉及构建动态图的项目,并且正在考虑为此使用SVG。 基于此,我希望了解使用SVG能否真正实现我所追求的目标。 1)使用JavaScript和json,是否可以根据我的json数据在HTML页面内动态构建SVG图? 基本上,我想在页面内构造一个矩形框,在左侧,我可以说
1回复

在SVG路径上悬停时显示来自JSON的数据?

我正在制作美国的SVG地图,当您将鼠标悬停在每个州时,会显示一个指向每个州的小信息窗口,该窗口显示人口,类似于Google Maps的信息窗口。 不幸的是,我对JSON不太满意,所以我停留在这一点上。 目前,我有美国的SVG地图,并且通过CSS悬停时填充颜色发生了变化。 我有一组JSON
1回复

D3边缘捆绑产生svg的边缘全长

我一直在研究一些以这些美丽片段为基础的地块: 带边缘捆绑的非分层径向支出 ,添加悬停和其他装饰。 但是,我注意到,当片段被馈入某些json文件时,它会生成跨越边缘附加到的svg的整个高度(或宽度)的边缘。 这个小提琴在Chrome中复制了该问题。 在这个小提琴中,亚瑟(Arthur)和布
1回复

ReactComponent内SVG的JSON格式

我使用AfterEffects的bodymovin扩展名来创建动画并将其导出为与Web兼容的JSON。 我尝试按照此演练来弄清楚如何将其包含在组件中: https : //gist.github.com/prettyhandsome/caa7386dcda76fde28cf5d2a07a12082#
1回复

根据基于下拉列表的JSON属性过滤d3SVG

我有力导向图的节点和链接数据。 节点之间可能有一个,两个或三个链接: 我有一个HTML下拉菜单,供用户过滤出没有一定数量链接的节点(和相应的链接): 我已将此下拉菜单合并到我的d3代码中: 这将导致图形被删除,并在下拉菜单中进行新选择时重新显示。 目的是仅显示值大于或等于选择的节
2回复

根据d3.js中的JSON属性选择特定的svg路径

是否可以仅选择使用 D3 从 geoJSON 文件创建的 SVG 路径之一? 在我的情况下,路径是地图中的区域。 用户可以从下拉列表中选择一个区域。 我想使用此列表中的选定值来选择具有匹配属性的路径并为其着色不同的颜色。 区域名称是 geoJSON 文件中的属性之一。 我可以通过添加某种过滤器来进一
1回复

查找将Sketch形状路径点(json格式)转换为svg路径的模式或公式

我试图找到一个模式将Sketch形状点(json格式)转换为svg路径,因为我们知道草图文件只是zip文件,解压缩你将获得json文件。 这里是样本json代码 这为Triangle提供了svg路径代码 因为我的理解getting 33(x value)完成如下,因为上面的帧原点是0,
2回复

iOS:从JSON显示svg

我正在尝试在我的 iOS 应用程序中显示一个 svg 文件。 svg 文件由 REST API 提供给我。 所以我最终从 API 得到了这样的答案: 目前我正在一个网络视图中显示它并且它正在显示。 我想直接在我的 iOS 应用程序中显示 svg,没有网络视图。 我一直在查看 SVGKit 库,但还