I have a bunch of line elements created with D3 but the strange thing is that they're appearing in the DOM and when I mouseover them I see it being highlighted but there isn't anything there, everything is just blank. The code somewhat looks like this and the CSS has some weird webkit-transform-origin stuff. Does anyone know what is wrong? (screenshot of issue: http://imgur.com/HRE01Gd)
<div>
<svg width="1000" height="700">
<line x1="420" y1="470" x2="394.9078930250818" y2="369.0723716341295" id="id-1" style="stroke- width: 10px; color: red;"></line>
</svg>
</div>
-webkit-transform-origin-x: 0px;
-webkit-transform-origin-y: 0px;
-webkit-transform-origin-z: initial;
color doesn't do anything. Set stroke instead. At the moment, all of your lines are getting rendered with no stroke at all, which makes them invisible.
You need to change color to stroke. For instance:
<line x1="420" y1="470" x2="394.9078930250818" y2="369.0723716341295" id="id-1" style="stroke-width: 10px; stroke: red;"></line>
I had same problem. Tried to set stroke-width - did not help. Fixed it with correct x position of the element.
Related
Hi I have this SVG path and it works perfectly in IE (oddly) but only displays a tiny line in Chrome. Any help appreciated!
<svg class="svgs" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path style="stroke:#ff0000; fill:none;" d="M428 237L200 500"/></svg>
style:
.svg {
z-index: 1;
position: absolute;
top: 0px;
left: 0px;
}
You've not specified a height or width (or a viewBox).
The default canvas size is 300 x 150px and you're mostly drawing outside of that.
Looks like Chrome (and Firefox) default to overflow: hidden; whereas IE defaults to overflow: visible
Best specify a size and restrict your drawing to that size.
Is there a way to fix the vertical layout of the PagerSettings when displayed at the bottom of a grid?
UPDATE: I am working on build 19.110.0013
I am trying to add numbers to the bottom of a grid using the PagerSettings tag described in the post Add page numbers to the bottom of Process Shipments grid. When I set the PagerVisible to bottom the numbers display vertical, but if I set the PagerVisible to top the numbers are properly displayed as horizontal.
<ActionBar PagerVisible="Bottom" DefaultAction="cmdItemDetails">
<PagerSettings Mode="Numeric" LinksCount="5" />
</ActionBar>
I could not reproduce that behavior in Acumatica version 19.106.0020 so I manually tweaked the CSS in order to reproduce that glitch.
Setting 'display: block' CSS property on GridPagerLink CSS class reproduces the same rendering.
In file '\App_Themes\Default\00_Controls.css' it is set as 'display: inline-block;'.
Inline option will make them stack horizontally so I don't have this glitch on my side.
Which exact Acumatica version are you running?
Use browser HTML inspect element feature to inspect the GridPagerLink.
Does it look like the default style below?
.GridPagerLink {
display: inline-block;
color: RGBA(0, 0, 0, 0.87);
text-decoration: none;
font-size: 15px;
font-weight: bold;
padding: 5px 10px;
height: 18px;
border: solid 1px transparent;
}
I have this html element. I'd like to break the text so Merced shows up on the next line.
<text transform="translate(374.14371673354304,603.9583614333004)"
font-size="10 pt" fill="#787773" text-shadow="#000 0px 0px 0.5px">
Oceanview/Merced/Ingleside</text>
I tried to use a \n character and a \r character, without success.
In not what you are trying to do but try this...
<input type="text" transform="translate(374.14371673354304,603.9583614333004)"
font-size="10 pt" fill="#787773" text-shadow="#000 0px 0px 0.5px" />
<p>Oceanview</p>
<p>Merced</p>
<p>Ingleside</p>
In a SVG drawing, you can use <br> inside <text> to create line breaks:
<svg width="100" height="100"><text y="50">Example<br>New Line</text></svg>
You can use CSS line-height and margin to control the paragraph size.
The goal is to create multiple buttons (in my case two) with different symbols based on one SVG.
I have an SVG file containing 3 groups with vector shapes.
One group is background that needs to be filled by particular color (hover).
Two other groups contain different symbols (ellipse,square) and named with ZZZ at the end.
One button should show ellipse, another button-square.
I've set these two groups in SVG to "display:none" unless they are targeted.Content of the test.svg as follow:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22"><defs><style>
.cls-1 {
fill: #340000;
}
.cls-2 {
fill: none;
stroke: #fff;
stroke-miterlimit: 10;
}
[id$=zzz] { display: none; }
g:target { display: block; }
</style></defs><g id="Layer_2" data-name="Layer 2"><g id="test"><g id="group_background" data-name="group background"><rect id="shape_background" data-name="shape background" class="cls-1" width="22" height="22"/></g><g id="square_zzz" data-name="square zzz"><rect id="shape_square" data-name="shape square" class="cls-2" x="4.731" y="4.237" width="13.119"height="13.119"/>
</g>
<g id="ellipse_zzz" data-name="ellipse zzz">
<circle id="shape_ellipse" data-name="shape ellipse" class="cls-2" cx="11.29" cy="10.797" r="6.693"/>
</g></g></g></svg>
In my CSS I'm trying to show different shapes on the buttons:
.button1{background-image:url(test.svg#square_zzz);}.button2{background-image:url(test.svg#ellipse_zzz);}
However nothing shows up.
Question dismissed. Targeting ID works fine - ( Dreamweaver Live view issue).
Still trying to figure out how to change color for background and shape on targeting group with CSS and implement cloneNode() to duplicate button without creating multiple SVG instances for each button.
I don't know how to really explain this but how can I center align this logo
http://jsfiddle.net/fa7w3h99/3/
I have tried the following but it didnt seem to work as intended.
.center-logo {
display: block;
margin: auto;
}
You will have to change the width, height, and viewbox attributes of your svg.
Here I'd say it should be :
width="135px" height="135px" viewBox="0 0 135 135"
jsfiddle