Databases
StackOverflow2013
Postsdbo
POMultiline editable textarea in SVG
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POMultiline editable textarea in SVG
    primarykey
    data
    text
    <p>I'm trying to implement multiline editable textfield in SVG. I have the following code in <a href="http://jsfiddle.net/ca4d3/" rel="nofollow">http://jsfiddle.net/ca4d3/</a> :</p> <pre><code>&lt;svg width="1000" height="1000" overflow="scroll"&gt; &lt;g transform="rotate(5)"&gt; &lt;rect width="300" height="400" fill="#22DD22" fill-opacity="0.5"/&gt; &lt;/g&gt; &lt;foreignObject x="10" y="10" overflow="visible" width="10000" height="10000" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"&gt; &lt;p style="display:table-cell;padding:10px;border:1px solid red; background-color:white;opacity:0.5;font-family:Verdana; font-size:20px;white-space: pre; word-wrap: normal; overflow: visible; overflow-y: visible; overflow-x:visible;" contentEditable="true" xmlns="http://www.w3.org/1999/xhtml"&gt; Write here some text. Be smart and select some word. If you wanna be really COOL, paste here something cool! &lt;/p&gt; &lt;/foreignObject&gt; &lt;/svg&gt; </code></pre> <p>In newest Chrome, Safari and Firefox the code works in some way, but in Opera and IE 9 not.</p> <p>The goal is that:<br> 0) Works in newest Chrome, Safari, Firefox, Opera and IE and if ever possible in some pads.<br> 1) White-spaces are preserved and text wraps only on newline char (works in Chrome, Safari and Firefox, but not in Opera and IE 9 *).<br> 2) The textfield is editable (in the same reliable and stabile way as textareas and contenteditable p elements in html) and height and width is expanded to fit text (works in Chrome, Safari and Firefox, but not in Opera and IE 9 *).<br> 3) Texfield can be transformed (rotated, skewed, translated) while maintaining text editability (Tested rotation, but not work in any browser *). </p> <ul> <li>EDIT: <a href="http://jsfiddle.net/ca4d3/3/" rel="nofollow">Foreignobject rotation</a> works on Firefox 15.0.1, but not in Safari 5.1.7 (6534.57.2), Chrome 22.0.1229.79, Opera 12.02, IE 9. Tested on Mac OS X 10.6.8.</li> </ul> <p>4) Textfield can be clipped and masked while not necessarily maintaining text editability (not yet tested). </p> <p>*) using above code</p> <p>These all can be achieved using Flash, but Flash has so severe problems that it is not suitable for my purposes (after every little change in code, all have to be compiled again using Flex, which is slow, font size has limits, tracking technique is pixeloriented, not relative to em size etc.) and there still are differences across platforms. And I want to give a try to SVG!</p> <p><strong>GUESTION:<br> Can I achieve my goals 0-4 with current SVG support in browsers? Is coming SVG 2.0 for some help in this case?</strong></p> <p>EDIT: Changed display:table to display:table-cell (and added new jsfiddle), because display:table made the field to loses focus when pressed arrow-up on first text row.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USSam
    1. USTimo Kähkönen
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POMultiline editable textarea in SVG
      1. USvalmynd
      1. VTFavorite
    2. VO
      singulars
      1. POMultiline editable textarea in SVG
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POMultiline editable textarea in SVG
      1. USNarando
      1. VTFavorite
    1. COIE does not support foreignObject. I suspect that makes supporting this in IE unachievable.
      singulars
      1. POMultiline editable textarea in SVG
      1. USRobert Longson
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload