Question

我正在为需要能够编辑非常基本的SVG文件的项目实现SVG-edit的自定义版本。要求这些SVG文件中的文本是可编辑的，而不是图像。

因此，其中一个文件的常见示例顶部会有一个文本元素，而下面会有一个图像元素。是否有任何属性我可以添加到图像元素，因此我可以在javascript编辑器本身上进行任何配置，以防止用户更改图像元素？

（显然我可以在不使用SVG编辑的情况下实现这一点。即，只需要为用户输入一个TextBox，并用它的值替换SVG上的文本元素，但这很难看。）

任何帮助都非常感谢..

Answer 1

转到SVG编辑所有SVG DOM都是可编辑的，即使存在readonly等属性，SVG Edit也会忽略它，除非您自己实现它。

我也拥有自己的implementation of SVG Edit，我碰巧遇到了类似的用例。我所做的是隐藏图层面板并将可编辑内容放在最顶层。这样，用户无权访问底层。您必须修改SVG文件，使其看起来像这样...

<svg xmlns="http://www.w3.org/2000/svg">
    <g>
      <title>Layer 1</title>
      <!-- NON EDITABLE CONTENT -->
    </g>
    <g>
      <title>Layer 2</title>
      <!-- YOUR TEXT ELEMENTS -->
    <g>
</svg>

然后你只需用一些CSS隐藏图层面板

#svg_editor #sidepanels {
  display: none;
}

http://tinyurl.com/9q9s7d9

（URL链接到SVG Edit的trunk构建，但由于它加载了编码的SVG字符串而缩短了它）

使SVG元素只读

1 个答案: