Draft for Information Only
Content
<foreignObject> Example Attributes Global attributes Usage notes Specifications Sources and References
<foreignObject>
The <foreignObject> SVG element includes elements from a different XML namespace. In the context of a browser, it is most likely (X)HTML.
SVG Code Input: <?xml version="1.0" standalone="no"?>
<svg style='border:1px solid black' width='280' height='250' version='1.1' xmlns='http://www.w3.org/2000/svg'>
<svg width='226' height='226' viewBox='-25, -25, 226, 226' version='1.1' xmlns='http://www.w3.org/2000/svg'>
<pattern id='pattern-halfgrid' x='0' y='0' width='5' height='5' patternUnits='userSpaceOnUse'>
<path d='M 5 0 L 0 0 0 5' fill='none' stroke='red' stroke-width='0.2'/>
</pattern>
<pattern id='pattern-grid' x='0' y='0' width='10' height='10' patternUnits='userSpaceOnUse'>
<rect width='10' height='10' fill='url(#pattern-halfgrid)' stroke-width='0'></rect>
<path d='M 10 0 L 0 0 0 10' fill='none' stroke='black' stroke-width='0.2'/>
</pattern>
<rect x='0' y='0' width='100%' height='100%' fill='url(#pattern-grid)' stroke-width='0'></rect>
<svg transform='scale(0.884955752212389)' preserveAspectRatio='xMinYMin' viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'>
<style>
div {
color: white;
font: 18px serif;
height: 100%;
overflow: auto;
}
</style>
<polygon points='5,5 195,10 185,185 10,195' />
<!-- Common use case: embed HTML text into SVG -->
<foreignObject x='20' y='20' width='160' height='160'>
<!--
In the context of SVG embedded in an HTML document, the XHTML
namespace could be omitted, but it is mandatory in the
context of an SVG document
-->
<div xmlns='http://www.w3.org/1999/xhtml'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed mollis mollis mi ut ultricies. Nullam magna ipsum,
porta vel dui convallis, rutrum imperdiet eros. Aliquam
erat volutpat.
</div>
</foreignObject>
</svg>
</svg>
<text x='5' y='17' font-size='20'>(0,0)</text>
<text x='195' y='17' font-size='20'>(200,0)</text>
<text x='5' y='245' font-size='20'>(0,200)</text>
<text x='195' y='245' font-size='20'>(200,200)</text>
<circle cx='25' cy='25' r='2' fill='black'/>
<circle cx='225' cy='25' r='2' fill='black'/>
<circle cx='25' cy='225' r='2' fill='black'/>
<circle cx='225' cy='225' r='2' fill='black'/>
</svg>
HTML Web Page Embedded Output:
height
The height of the foreignObject. Value type : <length> |<percentage> ; Default value : auto ; Animatable : yes
width
The width of the foreignObject. Value type : <length> |<percentage> ; Default value : auto ; Animatable : yes
x
The x coordinate of the foreignObject. Value type : <length> |<percentage> ; Default value : 0 ; Animatable : yes
y
The y coordinate of the foreignObject. Value type : <length> |<percentage> ; Default value : 0 ; Animatable : yes
Note: Starting with SVG2, x , y , width , and height are Geometry Properties , meaning those attributes can also be used as CSS properties for that element.
Core Attributes
Most notably: id , tabindex
Styling Attributes
class , style
Conditional Processing Attributes
Most notably: requiredExtensions , systemLanguage
Event Attributes
Global event attributes , Graphical event attributes , Document event attributes , Document element event attributes
Presentation Attributes
Most notably: clip-path , clip-rule , color , color-interpolation , color-rendering , cursor , display , fill , fill-opacity , fill-rule , filter , mask , opacity , pointer-events , shape-rendering , stroke , stroke-dasharray , stroke-dashoffset , stroke-linecap , stroke-linejoin , stroke-miterlimit , stroke-opacity , stroke-width , transform , vector-effect , visibility
Aria Attributes
aria-activedescendant , aria-atomic , aria-autocomplete , aria-busy , aria-checked , aria-colcount , aria-colindex , aria-colspan , aria-controls , aria-current , aria-describedby , aria-details , aria-disabled , aria-dropeffect , aria-errormessage , aria-expanded , aria-flowto , aria-grabbed , aria-haspopup , aria-hidden , aria-invalid , aria-keyshortcuts , aria-label , aria-labelledby , aria-level , aria-live , aria-modal , aria-multiline , aria-multiselectable , aria-orientation , aria-owns , aria-placeholder , aria-posinset , aria-pressed , aria-readonly , aria-relevant , aria-required , aria-roledescription , aria-rowcount , aria-rowindex , aria-rowspan , aria-selected , aria-setsize , aria-sort , aria-valuemax , aria-valuemin , aria-valuenow , aria-valuetext , role
Categories
None
Permitted content
Any elements or character data
Scalable Vector Graphics (SVG) 1.1 (Second Edition) (SVG)
Sources and References
https://www.w3.org/TR/SVG2/embedded.html#ForeignObjectElement
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/foreignObject
©sideway
ID: 220100003 Last Updated: 1/3/2022 Revision: 0 Ref:
References
http://www.w3.org/TR/1999/REC-html401-1999, 1999, HTML 4.01 Specification: W3C Recommendation, updated 24 December 1999