Question 43105 in Html Question posted in
Some basic documentation can be found here.

foreignObject in svg element hides resize handle – Html

Adding a foreignObject to a svg element hides the handle of a resizable element.

The follwoing snippet displays correctly

<div style="height: 200px; width: 200px; resize: vertical; overflow: auto; background-color: #dfd">
    <svg viewbox = "10 10 50 50" height="100" style="background-color: #fdd">
        <!-- <foreignObject x="20" y="40" width="10" height="10" style="background-color: #adf;"></foreignObject> -->
    </svg>
</div>

enter image description here

while the snippet below has no resize handle displayed.

<div style="height: 200px; width: 200px; resize: vertical; overflow: auto; background-color: #dfd">
    <svg viewbox = "10 10 50 50" height="100" style="background-color: #fdd">
        <foreignObject x="20" y="40" width="10" height="10" style="background-color: #adf;"></foreignObject>
    </svg>
</div>

enter image description here

The handle is still functional and will display as soon as scrollbars appear. Am I missing something?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I found out that adding an empty div with relative positioning makes the handle appear:

    <div style="height: 200px; width: 200px; resize: vertical; overflow: auto; background-color: #dfd">
    <svg viewbox = "10 10 50 50" height="100" style="background-color: #fdd">
        <foreignObject x="20" y="40" width="10" height="10">
            <div xmlns="http://www.w3.org/1999/xhtml"
                style="width:10px;height:10px;background-color: #adf;">
            </div>
        </foreignObject>
    </svg>
    <div style="position: relative"></div>
</div>


  2. 0

    That looks like a bug in Chrome. Firefox works fine. In any case you should stick to the requirements for <foreignObject> and add namespace to the child element.

    <div style="height: 200px; width: 200px; resize: vertical; overflow: auto; background-color: #dfd">
  <svg viewbox = "10 10 50 50" height="100" style="background-color: #fdd">
    <foreignObject x="20" y="40" width="10" height="10">
      <div xmlns="http://www.w3.org/1999/xhtml"
        style="width:10px;height:10px;background-color: #adf;"></div>
    </foreignObject>
  </svg>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search