只读SVG元素

Question

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

因此，这些文件之一的常见示例将在顶部有一个文本元素，并在其下有一个图像元素。有没有我可以添加到图像元素的任何属性，并因此可以在JavaScript编辑器本身进行的任何配置，以防止用户更改图像元素？ （很明显，我可以在不使用SVG编辑的情况下实现这一点，也就是说，只需为用户输入一个TextBox，并用SVG的值替换SVG上的文本元素，但这很难看。）

任何帮助非常感激..

Answer 1

要SVG编辑你所有的SVG DOM是可编辑的，即使有一个属性，如readonly除非你自己实现了它SVG编辑会忽略它。

我也有自己的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，但由于它加载了一个编码的SVG字符串，因此它缩短了）