只讀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字符串，因此它縮短了）