Yes, with the `&lt;foreignObject&gt;` element, see [this question][1] for some examples.

Alternatively, if you have an html5 document you can also use CSS positioning and z-index to make parts of html visible where you want laid out on top of the svg. If you do it like that you don&#39;t need to nest the html inside the svg fragment. This will give you the most consistent behaviour across browsers in my experience.


  [1]: https://stackoverflow.com/questions/4991171/auto-line-wrapping-in-svg-text

Copied from [bl.ocks.org][1] (thank you, [Janu Verma][2])


&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-html --&gt;

    &lt;!DOCTYPE html&gt;
    &lt;html&gt;
    &lt;head&gt;
        &lt;meta charset=&quot;UTF-8&quot;&gt;
        &lt;title&gt;HTML inside SVG&lt;/title&gt;
        &lt;style type=&quot;text/css&quot;&gt;&lt;/style&gt;&lt;/head&gt;
        &lt;body&gt;
            &lt;div&gt;I&#39;m a div inside the HTML&lt;/div&gt;
            &lt;svg width=&quot;500&quot; height=&quot;300&quot; style=&quot;border:1px red solid&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;&gt;
                &lt;foreignobject class=&quot;node&quot; x=&quot;46&quot; y=&quot;22&quot; width=&quot;100&quot; height=&quot;100&quot;&gt;
                    &lt;div style=&quot;border:1px green solid&quot;&gt;I&#39;m a div inside a SVG.&lt;/div&gt;                
                &lt;/foreignobject&gt;
                &lt;circle cx=&quot;100&quot; cy=&quot;160&quot; r=&quot;50&quot; fill=&quot;blue&quot;&gt;&lt;/circle&gt;
            &lt;/svg&gt;
            &lt;div&gt;Interesting! But you a Foreign Object.&lt;/div&gt;
        &lt;/body&gt;
    &lt;/html&gt;

&lt;!-- end snippet --&gt;

**UPDATE**

Note that there is a &#39;camel error&#39; in the above - it&#39;s supposed to be `foreignObject` (capital O), not `foreignobject`. It doesn&#39;t matter if the misspelling is in &#39;straight&#39; HTML/SVG. But if you use JavaScript (`.createElementNS`), then it won&#39;t work without proper camel case (April 2020)

  [1]: https://bl.ocks.org/Jverma/2385cb7794d18c51e3ab
  [2]: https://bl.ocks.org/Jverma

Foreign Objects are not supported on Internet explorer. Please check [ForeignObject][1]


  [1]: http://caniuse.com/#search=foreignobject

I am trying to implement a simple `SQLite` export/import for backup purposes. Export is just a matter of storing a copy of the raw `current.db` file. What I want to do for import is to just delete the old `current.db` file and rename the `imported.db` file to `current.db`. Is this possible? When I try this solution, I get the following error:

    06-30 13:33:38.831: ERROR/SQLiteOpenHelper(23570):
        android.database.sqlite.SQLiteDatabaseCorruptException: error code 11: database disk image is malformed

If I look at the raw database file in a `SQLite` browser it looks fine.

Simple export and import of a SQLite database on Android

Look at the XML code here please:

    &lt;TableLayout
    	android:id=&quot;@+id/tableLayout1&quot;
    	android:layout_width=&quot;fill_parent&quot;
    	android:layout_height=&quot;fill_parent&quot;
    	android:padding=&quot;10dip&quot;
	    xmlns:android=&quot;http://schemas.android.com/apk/res/android&quot;&gt;
        
        &lt;TableRow
        android:id=&quot;@+id/tableRow1&quot;
        android:layout_width=&quot;wrap_content&quot;
        android:layout_height=&quot;wrap_content&quot;&gt;

  	    &lt;!-- Some stuff goes here --&gt;

	    /&gt;
        &lt;/TableRow&gt;

        &lt;TableRow
        android:id=&quot;@+id/tableRow2&quot;
        android:layout_width=&quot;wrap_content&quot;
        android:layout_height=&quot;wrap_content&quot;&gt;

  	    &lt;!-- Some stuff goes here --&gt;

	    /&gt;
        &lt;/TableRow&gt;

        &lt;TableRow
        android:id=&quot;@+id/tableRow3&quot;
        android:layout_width=&quot;wrap_content&quot;
        android:layout_height=&quot;wrap_content&quot;&gt;

  	    &lt;!-- Some stuff goes here --&gt;

	    /&gt;
        &lt;/TableRow&gt;
        
    
    &lt;/TableLayout&gt;

My code is **much longer** than that but I just eliminated the unnecessary parts.
The problem is I want to make this `TableLayout` a scrollable so that all of my stuff can be shown.

I tried to put this line in the `TableLayout` in order to make it scrollable:

    android:isScrollContainer=&quot;true&quot;


But it does NOT do the job. **Is there a way ?**

How to make a scrollable TableLayout?

HTML5 supports the `&lt;svg&gt;` tag, allowing to embed SVG into HTML.

Digging a little deeper, can I nest some HTML inside my `&lt;svg&gt;` fragment? For example, I&#39;d like to put a CSS&#39;ed `&lt;table&gt;` in some part of my SVG graphics.

I made a small test and Chrome12 didn&#39;t like the HTML `&lt;p&gt;` inside the `&lt;svg&gt;`.
Is there some technique to make it work (such as maybe an html container tag?)?

Can I embed HTML into an HTML5 SVG fragment?

HTML5 supports the <code>&#x3C;svg></code> tag, allowing to embed SVG into HTML.
Digging a little deeper, can I nest some HTML inside my <code>&#x3C;svg></code> fragment? For example, I'd like to put a CSS'ed <code>&#x3C;table></code> in some part of my SVG graphics.
I made a small test and Chrome12 didn't like the HTML <code>&#x3C;p></code> inside the <code>&#x3C;svg></code>.
Is there some technique to make it work (such as maybe an html container tag?)?

Can someone please help me get my head around this bug? With Firefox its working fine but with Internet Explorer 7 its not. It seems not to understand the `display: inline-block;`.


**html:**

    &lt;div class=&quot;frame-header&quot;&gt;
    	&lt;h2&gt;...&lt;/h2&gt;
    &lt;/div&gt;

**css:**

    .frame-header {
    	height:25px;
    	display:inline-block;	
    }



IE7 does not understand display: inline-block

I have an HTML login form that contains following elements (in this order):

- `input type=text` (user name input)
- `input type=password` (password)
- `input type=submit` (Login button)

Why does the Android browser show &quot;Go&quot; button in soft keyboard instead of &quot;Next&quot; button when the focus is in the `text input`? This causes user to fail to login very easily because after entering the user name, the user presses the bottom right button in the keyboard (usually the correct action) and the form will be submitted with an empty password, which obviously is not going to work. [This behavior would make sense in case my browser was set to remember passwords and the password manager would be able to fill in the password. However, this is not the case here as you can test yourself below.]

I&#39;d like to have the input type text to have &quot;Next&quot; button and the input type password (the last input before the submit) to have the &quot;Go&quot; button.

An example of problematic form is at https://peda.net/:login (this form contains code to detect &quot;Enter&quot; key for the input and prevents submitting the form unless the last visible form input is focused).

Do you know a real fix for this issue? I know that if I were implementing native application, I&#39;d use `android:imeOptions=&quot;actionNext&quot;` (see https://stackoverflow.com/questions/6327886/how-to-change-the-softkey-keyboard-go-button-to-next-android). However, in this case it&#39;s an HTML form and Android default browser.

The problem is visible with at least following configurations:

- &quot;Browser&quot; system app running on Android 2.3.4 (Cyanogenmod 7)
- &quot;Browser&quot; system app running on Android 4.2.2 (Cyanogenmod 10.1)
- &quot;Browser&quot; system app running on Android 4.3.1 (Cyanogenmod 10.2 M1)
- &quot;Browser&quot; system app (AOSP Browser) running on Android 4.4.2 (Cyanogenmod 11.0 M3)
- &quot;Browser&quot; system app (AOSP Browser) running on Android 5.5.1 (Cyanogenmod 12.1) [has an arrow icon instead of word &quot;Go&quot;]
- &quot;Browser&quot; system app (AOSP Browser) running on Android 6.0.1 (Cyanogenmod 13.0) [has an arrow icon instead of word &quot;Go&quot;]


HTML: Why does Android browser show &quot;Go&quot; instead of &quot;Next&quot; in keyboard?

I am getting this PHP error, what does it mean?

    Notice: Undefined offset: 0 in 
    C:\xampp\htdocs\mywebsite\reddit_vote_tut\src\votes.php on line 41

From this code:

    &lt;?php 
    include(&quot;config.php&quot;); 
     
    function getAllVotes($id) 
    { 
        $votes = array(); 
        $q = &quot;SELECT * FROM entries WHERE id = $id&quot;; 
        $r = mysql_query($q); 
        if(mysql_num_rows($r)==1)//id found in the table 
        { 
            $row = mysql_fetch_assoc($r); 
            $votes[0] = $row[&#39;votes_up&#39;]; 
            $votes[1] = $row[&#39;votes_down&#39;]; 
        } 
        return $votes; 
    } 
     
    function getEffectiveVotes($id) 
    { 
            $votes = getAllVotes($id); 
            $effectiveVote = $votes[0] - $votes[1];    //ERROR THROWN HERE
            return $effectiveVote; 
    } 
     
    $id = $_POST[&#39;id&#39;]; 
    $action = $_POST[&#39;action&#39;]; 
     
    //get the current votes 
    $cur_votes = getAllVotes($id); 
     
    //ok, now update the votes 
     
    if($action==&#39;vote_up&#39;) //voting up 
    { 

        $votes_up = $cur_votes[0]+1;     //AND ERROR THROWN HERE


        $q = &quot;UPDATE threads SET votes_up = $votes_up WHERE id = $id&quot;; 
    } 
    elseif($action==&#39;vote_down&#39;)
    { 
        $votes_down = $cur_votes[1]+1; 
        $q = &quot;UPDATE threads SET votes_down = $votes_down WHERE id = $id&quot;; 
    } 
     
    $r = mysql_query($q); 
    if($r)
    { 
        $effectiveVote = getEffectiveVotes($id); 
        echo $effectiveVote.&quot; votes&quot;; 
    } 
    elseif(!$r) //voting failed 
    { 
        echo &quot;Failed!&quot;; 
    } 
    ?&gt;



Notice: Undefined offset: 0 in

If I have a `.html` file in a GitHub repository, e.g. for running a a set of JavaScript tests, is there any way I can view that page directly—thus running the tests?

For example, could I somehow actually see the test results that would be produced by [the jQuery test suite][1], without downloading or cloning the repo to my local drive and running them there?

I know this would basically put GitHub in the static content hosting business, but then again, they just have to change their mime-type from [`text/plain`][2] to `text/html`.


  [1]: https://github.com/jquery/jquery/blob/master/test/index.html
  [2]: https://raw.github.com/jquery/jquery/master/test/index.html

Can I run HTML files directly from GitHub, instead of just viewing their source?

I found that in Google+ Project&#39;s page that buttons are all made from divs like:  

    &lt;div role=&quot;button&quot;&gt;&lt;/div&gt;  

I&#39;d  like to know, is this just for semantic purposes, or does it influence the style or event handling of the `&lt;div&gt;`?

I tried to simulate a button &quot;click&quot; with the jQuery `click` event, but it didn&#39;t work.

What does role=&quot;button&quot; mean?

How can I reorder Raphael or their underlying SVG elements after creation.
Better yet, do something like layers exist in SVG?

Ideally I would like two or more layers in which to place elements at any time; A background and a foreground layer. If that is not an option, popping elements to the front would be ok, and pushing it to the back would be better in this particular case.

Thanks,

SVG re-ordering z-index (Raphael optional)

How do I convert an `svg` to `png`, in Python? I am storing the `svg` in an instance of `StringIO`. Should I use the pyCairo library? How do I write that code?

Convert SVG to PNG in Python

I need to resize and rotate certain elements in SVG document using javascript. The problem is, by default, it always applies the transform around the origin at `(0, 0)` – top left.

How can I re-define this transform anchor point?

I tried using the `transform-origin` attribute, but it does not affect anything. 

This is how I did it:

    svg.getDocumentById(&#39;someId&#39;).setAttribute(&#39;transform-origin&#39;, &#39;75 240&#39;);

It does not seem to set the pivotal point to the point I specified although I can see in Firefox that the attribute is correctly set. I tried things like `center bottom` and `50% 100%` with and without parenthesis. Nothing worked so far.

Can anyone help?


How to set transform origin in SVG

I want to display some text _inside_ SVG `rect`. Is it possible?

I tried 

    &lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot;&gt;
      &lt;g&gt;
        &lt;rect x=&quot;0&quot; y=&quot;0&quot; width=&quot;100&quot; height=&quot;100&quot; fill=&quot;red&quot;&gt;
          &lt;text x=&quot;0&quot; y=&quot;10&quot; font-family=&quot;Verdana&quot; font-size=&quot;55&quot; fill=&quot;blue&quot;&gt; Hello &lt;/text&gt;
        &lt;/rect&gt;
      &lt;/g&gt;
    &lt;/svg&gt;

But it does not work.

SVG: text inside rect

Currently building a browser-based SVG application. Within this app, various shapes can be styled and positioned by the user, including rectangles.

When I apply a `stroke-width` to an SVG `rect` element of say `1px`, the stroke is applied to the `rect`’s offset and inset in different ways by different browsers. This is proving to be troublesome, *especially* when I try to calculate the outer width and visual position of a rectangle and position it next to other elements. 

For example:

- Firefox adds 1px inset (bottom and left), and 1px offset (top and right)
- Chrome adds 1px inset (top and left), and 1px offset (bottom and right)

My only solution so far would be to draw the actual borders myself (probably with the `path` tool) and position the borders behind the stroked element. But this solution is an unpleasant workaround, and I’d prefer not to go down this road if possible.

So my question is, can you control how an SVG’s `stroke-width` is drawn on elements?

Content Type	Original Author	Original Content on Stackoverflow
Question	Serge Wautier	View Question on Stackoverflow
Solution 1 - Html	Erik Dahlström	View Answer on Stackoverflow
Solution 2 - Html	mathheadinclouds	View Answer on Stackoverflow
Solution 3 - Html	atluriajith	View Answer on Stackoverflow

Can I embed HTML into an HTML5 SVG fragment?

Html Problem Overview

Html Solutions

Solution 1 - Html

Solution 2 - Html

Solution 3 - Html

How to make a scrollable TableLayout?

Simple export and import of a SQLite database on Android

Attributions