I've setup a drawing utility with Raphael.js. The user can draw shapes, paths and enter text. Once a user adds text -> Paper.text() to the svg the svg goes into a selectable state. Meaning, if I add text and switch to the pen tool, moving the pen around the svg will cause adjacent dom elements to go into their ::selection state.
So I'd like to convert the text to a path to prevent this from happening. I don't see anything like this in the documentation.
if you use print() instead of text() for text printing, then the text will be a raphael path object. (print() use a cufon javascript font that renders to a raphael path).
Try tweaking the pointer-events property on the text elements with .attr(). none might fit your needs. There are some good background info links on MDN.
.attr({pointer-events: none})
Related
I have an SVG graphic that I want to put some text on from my PHP variables. The graphic was generated in Illustrator and resizes in my web page to 100% width. Here is a representation of it:
How could this be done for the 8 text items? Does something special need to be done in Illustrator, like creating an anchor point for the text? How do I update the text item? I've done research but haven't been able to find a similar situation.
Thankful for any information that could help me narrow down my search.
Being someone who has never worked with files of .SVG file type before, this was a misunderstanding.
If you design a graphic in Adobe Illustrator, save it as an SVG and edit it with your favorite text editor, you will be able to see the SVG mark-up. It all makes sense now, and here you will be able to change the text at the code-level.
For my application, I saved the SVG as a PHP file and did an include on it, while changing the raw text to PHP variables in said file. This allowed me to pass my dynamic text as variables to the graphic.
I'm looking for a cross-platform rich text widget that supports non-trivial markup including the following, and I wonder if Tk's text widget can be extended to do them:
set text background color
draw lines over and under text
draw borders around text
decorate content by overlaying lines and shapes (e.g., filled circles)
indicate items in a gutter
To give you an idea, look at the middle pane here:
I read a little about tags, but they seem to be limited to the basics like font, color, etc. I also read about drawing text on the canvas widget, but it looks like standard text editor-like text selection, flow, etc. would be lost.
Thanks very much.
In short, you can only do what you've read in the documentation (assuming you've read authoritative documentation).
Specifically, the text widget does not do all that you asked. You cannot do the following:
draw lines over and under text. You can use custom fonts with the overstrike and underline attributes turned on but there's no way to add lines over a widget, and you have no control on the visual attributes of the overstrike or underline
decorate content by overlaying lines and shapes (e.g., filled circles)
You can set text background and foreground colors, draw borders around the text, and put items in a gutter. For the latter you would need to use a canvas as the gutter.
Note that if you use a canvas rather than a text widget you can do all of those things (read: the text items of the canvas can be editable), but it would require a large amount of work to implement all of the bindings necessary to use it as an editor. For more information on this approach, see http://effbot.org/zone/editing-canvas-text-items.htm
So here is the problem:
I am trying to create dynamic buttons that have text. The text will be generated dynamically so the svg object doesn't know the size of the text. There are two things that I am looking to do and I hope that SVG will do this
First I want the left and right edge of the svg element to stay the same even if I scale the element horizontally
The problem is that I have to set a width on the svg otherwise it doesn't show up when I display the page. Also on the Home and blog buttons you can see that the edge is compressed. I want the edge to stay the same no matter how much text is in the element.
Also I can't seem to set the scale or width properly even with a javascript .getComputedTextLength()
Any help or a point in the right direction would be very helpful
Buttons that are sized to their text content is functionality that can be adressed with Raphael's getBBox()
The use of this js library means that you are implicitly using SVG or VML and this functionality is more easily addressed by referencing this JavaScript library
To see the getBBox() function in action you could visit the Autobox example here:
http://www.irunmywebsite.com/raphael/additionalhelp.php?v=2
How to change the height and width of textarea (or any html element) from javascript which is inside foreign object in svg.Moreover, can I drag an html elelment and drop on svg container by any mean (htm5 any hint) or atleast can I get the coordinates on svg during draging so that I can implement my own drag and drop. Thanks in advance
You appear to my eye to have at least two distinct questions. If I understand correctly, the first one is something like this: how can you write JavaScript within an SVG instance so that you can embed the SVG instance and have the JS control the embedding HTML? Do I have that right?
If so, the answer can be constructed from the parts of http://phaseit.net/examples/SVG4/c1.html and related examples. Briefly, write "window.top" to reach the HTML reference.
The same sort of reference gives access to HTML5 drag-and-drop, if that's what you're after.
Is that the level of answer you're after, or do you need an executable example?
LATER, AFTER MORE DISCUSSION: it appears that http://phaseit.net/examples/SVG5/embedding.svg is more like what you're after. Do I have that right, Arslan Ahson? What you should see when you display the SVG instance there is an SVG-coded elliptical button which, when pushed, toggles the appearance (background color and width) of a nearby embedded HTML textarea.
I would like to take a multiline block of text and display it in SVG. I would like to keep the lines as lines. Is there a proper way to do this?
I am using Inkscape for my base drawing and Batik for my rendering. It seems the two do not agree on how to do this.
Inkscape is creating a structure like this:
<flowRoot
xml:space="preserve"
id="flowRoot3089"
style="font-size:16px;font-style:normal;font-weight:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#000000;fill-opacity:1;stroke:none;font-family:Sans"
transform="translate(19.71875,334.88681)">
<flowRegion id="flowRegion3091">
<rect id="rect3093" width="50.78125" height="75" x="34.765625" y="155.89932"/>
</flowRegion>
<flowPara id="flowPara3123">Item 1</flowPara>
<flowPara id="flowPara3137">Item 2</flowPara>
<flowPara id="flowPara3139">Item 3</flowPara>
</flowRoot>
However, this is not acceptable to Batik for some reason.
Inkscape sets the SVG version of the document to 1.1 instead of 1.2, but still uses flowing text.
The simple solution for you is to edit your svg document and change the SVG version attribute to 1.2. Inkscape will not change it back to 1.1 and it handles the 1.2 version specifier fine.
Batik will then be happy to provide most functionality, however you'll also run into another Inkscape bug if you mess with pretty much any of the text attributes within the flow root that Inkscape creates. It sets the background color to the selected foreground color for the text, which means if you set the text color to red in Inkscape, when batik renders it, you'll see a red square ... the text is there, but its red too, so not really visible. This an Inkscape bug and is clearly visible in the code for the flowRegion -> rect element.
The solution is to manually edit your flowRect attributes after tweaking them with inkscape.
Batik also seems to do better if you use the standard svg output rather than inkscape svg output.
This is not acceptable since flow* elements are non-standard elements. It comes from an SVG1.2 draft that has never been accepted and it is designed to wrap text in custom shapes. Only Inkscape and some builds of Opera support it. So, don't use it, at least for the moment.
If you don't need text wrapping (and you don't seem to, but I don't understand what you mean by "I would like to keep the lines as lines"), I suggest you use the basic <text/> element.
I'd suggest <text> with <tspan> children. Inkscape can generate that for you quite easily, just don't click and drag an area but instead just click where you want the text and start writing, press return where you want a new line.
Alternatively, foreignObject will allow you to include html:
<svg:foreignObject><html:body><div>text here</html:div></html:body></svg:foreignObject>
Doesn't seem to work in Opera or IE, though.