I saw many questions about NS_ERROR_FAILURE when calling getBBox in Firefox, and as I understand, element must be visible before calling this:
Error : NS_ERROR_FAILURE in firefox while use getBBox()
But in my case, element is part of <mask>, and it seems that Firefox does not recognize it as visible element at all.
Markup is following:
<svg>
<mask id="mask">
<text
dominantBaseline="central"
textAnchor="middle"
x="50%" y="50%"
fill="white"
>
...
</text>
</mask>
<image mask="url(#mask)" xlink:href="..." width="100%" height="100%" />
</svg>
and I'm using getBBox on <text> to use it's dimensions as viewBox params (i.e., to stretch text at all available space inside svg).
With this, inspector shows that <text> has dimensions 0x0, like if it was invisible or not present in DOM.
What can I do to make it work?
Context
I am trying to convert a DGML graph into an SVG. I am using Javascript to read and parse the DGML Nodes and Links using Jquery. I created a DGML graph using Visual Studio 2017 (it has an interactive inbuilt editor). Essentially I need to create a mapping between the position of nodes on the DGML graph and a generated SVG. I have managed to make a conversion of every property of the nodes and links, except for a property called Bounds
<?xml version="1.0" encoding="utf-8"?>
<DirectedGraph xmlns="http://schemas.microsoft.com/vs/2009/dgml">
<Nodes>
<Node Id="Node1" Background="#FF000000" Bounds="289.142857142857,-914.285714285714,56.9200000000001,25.96" Label="node 1" UseManualLocation="True" />
<Node Id="Node2" Bounds="-99.1466388157435,-813.468571428572,56.9200000000001,25.96" Label="node 2" UseManualLocation="True" />
<Node Id="Node3" Bounds="165.353095238095,-821.948571428572,56.9200000000001,25.96" Label="node 3" UseManualLocation="True" />
<Node Id="Node4" Bounds="231.884895804269,-672.637129778181,56.92,25.96" Label="node 4" UseManualLocation="True" />
<Node Id="Node5" Bounds="126.293653230212,-514.368957318116,56.9200000000001,25.96" Label="node 5" UseManualLocation="True" />
<Node Id="Node6" Bounds="513.21231765747,-699.551714460973,56.9200000000001,25.96" Label="node 6" UseManualLocation="True" />
</Nodes>
<Links>
<Link Source="Node1" Target="Node2" Bounds="-33.5154810441621,-893.916239433358,322.658338187019,83.7763765262094" />
<Link Source="Node1" Target="Node3" Bounds="218.428553771979,-888.325714285714,81.7729515442388,60.9960031621974" />
<Link Source="Node2" Target="Node4" Bounds="-42.8686314368827,-788.653915128306,267.113829712029,113.638782142621" />
<Link Source="Node2" Target="Node5" Bounds="-60.9032254171191,-787.508586425781,200.456326731834,265.952512098603" />
<Link Source="Node3" Target="Node4" Bounds="199.596870550233,-795.988597412109,51.3011424145167,115.130629087374" />
<Link Source="Node4" Target="Node5" Bounds="168.40836594804,-646.677165527344,83.2767077301747,124.821483021298" />
<Link Source="Node4" Target="Node6" Bounds="288.80489440918,-682.991837277453,215.448314485295,20.6119078319973" />
<Link Source="Node6" Target="Node1" Bounds="337.645038336076,-882.098554229514,190.482965266866,182.54683792092" />
</Links>
<Properties>
<Property Id="Background" Label="Background" Description="The background color" DataType="System.Windows.Media.Brush" />
<Property Id="Bounds" DataType="System.Windows.Rect" />
<Property Id="Label" Label="Label" Description="Displayable label of an Annotatable object" DataType="System.String" />
<Property Id="UseManualLocation" DataType="System.Boolean" />
</Properties>
</DirectedGraph>
I saw in the Property tag for "Bounds" the datatype is System.Windows.Rect which has a constructor Rect(Double, Double, Double, Double)
- Initializes a new instance of the Rect structure that has the specified x-coordinate, y-coordinate, width, and height.
https://msdn.microsoft.com/en-us/library/system.windows.rect(v=vs.110).aspx
Since all the nodes have the same size, it is not wrong to assume that the final two parameters are width and height.
Question
How is the graphics coordinate system of the DGML oriented? For instance, an SVG graphic starts like most CG coordinates, left top corner origin; positive X towards right, positive Y towards bottom. I could not find any information on this on the DGML reference
https://learn.microsoft.com/en-us/visualstudio/modeling/directed-graph-markup-language-dgml-reference
Looking at your diagram i think the Y axis is inverted (top-down) and X axis is classical (left-right). Start of coordinates is between Node2 and Node5 somewhere behind the bottom of diagram view.
My DgmlPowerTools provides a "Save as SVG" option under the "Share" toolbar item.
I am very perplexed with the XUL's 'Box Model' layout.
I want to make a table-like layout of elements.
The layout should consist of one row and three columns.
The columns should have the same width and occupy the whole width of the page.
I will put different elements inside the columns, but the width of the columns should remain the same
and the elements should have their normal sizes, not stretched out.
Say, first column is empty, second contains an image, third contains a button.
How can I achieve that?
I tried boxes and grids, but the columns just seem to assume arbitrary width.
Thank you.
This does not work:
<grid>
<columns flex="1">
<column/>
<column/>
<column/>
</columns>
<rows>
<row>
<spacer flex="1"/>
<image src="MyImage.png"/>
<button id="MyButton" label="MyButton"/>
</row>
</rows>
</grid>
Specify the min and max width of each column and make each cell in the grid an hbox width specific widths and heights. Something like this:
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window id="yourwindow" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:h="http://www.w3.org/1999/xhtml">
<grid>
<columns flex="1">
<column maxwidth="100" minwidth="100"/>
<column maxwidth="100" minwidth="100"/>
<column maxwidth="100" minwidth="100"/>
</columns>
<rows>
<row>
<hbox maxwidth="100">
xxxx xxxxxxxx xxxx xxxxx xxxxxxxx xxxxxxxx
</hbox>
<hbox maxwidth="100" minwidth="100" maxheight="10">
<button id="MyButton1" label="MyButton1"/>
</hbox>
<hbox maxwidth="100" minwidth="100" maxheight="30">
<button id="MyButton1" label="MyButton2"/>
</hbox>
<hbox maxwidth="100" minwidth="100" maxheight="40">
<button id="MyButton3" label="MyButton3"/>
</hbox>
</row>
</rows>
</grid>
</window>
In Xul, the width and length attributes are always in pixels. You cannot specify a percentage like you can with css. This means you will have to know your page width in advance and specify widths accordingly if you want the columns to be evenly spaced and extend to the page width.
Here's another way. Use this:
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window id="yourwindow" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
xmlns:html="http://www.w3.org/1999/xhtml" xmlns:h="http://www.w3.org/1999/xhtml">
<grid>
<columns>
<column flex="1"/>
<column flex="1"/>
<column flex="1"/>
</columns>
<rows>
<row>
<button label="MyButton1"/>
<button label="MyButton2"/>
<button label="MyButton3"/>
</row>
</rows>
</grid>
</window>
to create this:
The buttons/columns will adjust as the window size is changed.
I suggest to use in combo with flex="1" on the column elements
<columns equalsize="always">
<column flex="1">
...
a/p documentation
https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Attribute/equalsize
you can also use equalsize="always" on the rows as well, this is how it is accomplished in the Thunderbird Lightning calendar layout
I am using geoserver styles, and i want to add point layer withe icons like google maps or custom icon,
I made this :
<PointSymbolizer>
<Graphic>
<ExternalGraphic>
<OnlineResource xlink:type="simple" xlink:href="administration.png" />
<Format>image/png</Format>
</ExternalGraphic>
</Graphic>
</PointSymbolizer>
But it takes the center of icon, how can I make displacement X and Y to take into consideration the top right on my icon for example knowing that the icone has 32x32px
Thanks lot
I found a solution but not very well :
This is :
<svg version="1.1"
id="Ebene_1"
xmlns="&ns_svg;"
xmlns:xlink="&ns_xlink;"
width="32"
height="74"
overflow="visible"
xml:space="preserve">
<image x="0" y="0" width="32" height="37" xlink:href="administration.png" />
</svg>
The problem is that the clicked area is big than the visual icon in openlayers.
Any help is very precious
This must be a simple problem, but I can't get my head around it. I have a resizable title window. Inside I just want a VGroup to hold the contents of the form and an HGroup to have a few buttons at the bottom. Very standard stuff.
<!-- Content -->
<s:VGroup id="content" height="340" width="100%">
...more stuff in here...
</s:VGroup>
<!-- Buttons -->
<s:HGroup id="buttonGroup" width="100%">
...buttons in here...
</s:HGroup>
Horizonal resizing works fine. However, I want it to behave such that when the TitleWindow is resized vertically that the buttons stay in the same place relative to the TitleWindow and the content VGroup is resized vertically. But I don't know what to set the height of the VGroup to?
Ideally it would be like this:
height="{this.parent.height - buttonGroup.height - top*
or something like that....
You can also try the following trick:
<s:VGroup id="layoutContainer" width="100%" height="100%">
<s:SkinnableContainer id="content" height="100%">
....content here....
</s:SkinnableContainer>
<!-- Buttons -->
<s:HGroup id="buttonGroup">
... buttons here...
</s:HGroup>
</s:VGroup>
The intent is to make the content-container take as mush as possible vertical space within the VGroup.
Let me know if that worked for you!
Use constraint properties.
You could try for AS:
content.top = 0;
content.bottom = buttonGroup.height;
buttonGroup.bottom = 0;
But better put it to MXML definition of the components
<s:VGroup id="content" top="0" bottom="{buttonGroup.height}" width="100%">
...more stuff in here...
</s:VGroup>
<s:HGroup id="buttonGroup" bottom="0" width="100%">
...buttons in here...
</s:HGroup>
Add some paddings and margins if you like