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
Related
It says 'This feature is only offered for Linear Ads because icons can be easily inserted in NonLinear ads and companion creative using existing features.' in VAST 4.2 document. But I don't know how it looks like.
I try this
<NonLinear id="GDFP" width="480" height="70" minSuggestedDuration="00:00:05" scalable="true" maintainAspectRatio="true">
<StaticResource creativeType="image/png">
<![CDATA[https://pagead2.googlesyndication.com/pagead/imgad?id=CICAgKDTwKyTLBDgAxhGMghR083HVMUH8w]]>
</StaticResource>
<NonLinearClickThrough>
<![CDATA[https://pubads.g.doubleclick.net/pcs/click]]>
</NonLinearClickThrough>
<NonLinearClickTracking>
<![CDATA[https://pubads.g.doubleclick.net/pcs/click]]>
</NonLinearClickTracking>
</NonLinear>
<NonLinear>
<Icon program="DAA" width="77" height="15" xPosition="right" yPosition="top" offset="00:00:00">
<StaticResource creativeType="image/png"><![CDATA[https://s.aolcdn.com/ads/adchoices.png]]></StaticResource>
</Icon>
</NonLinear>
and it do not work.
I also try this
<NonLinear id="GDFP" width="480" height="70" minSuggestedDuration="00:00:05" scalable="true" maintainAspectRatio="true">
<StaticResource creativeType="image/png">
<![CDATA[https://pagead2.googlesyndication.com/pagead/imgad?id=CICAgKDTwKyTLBDgAxhGMghR083HVMUH8w]]>
</StaticResource>
<NonLinearClickThrough>
<![CDATA[https://pubads.g.doubleclick.net/pcs/click]]>
</NonLinearClickThrough>
<NonLinearClickTracking>
<![CDATA[https://pubads.g.doubleclick.net/pcs/click]]>
</NonLinearClickTracking>
</NonLinear>
<NonLinear program="DAA" width="77" height="15" xPosition="right" yPosition="top" offset="00:00:00">
<StaticResource creativeType="image/png"><![CDATA[https://s.aolcdn.com/ads/adchoices.png]]></StaticResource>
</NonLinear>
and it do not work, NonLinear tag seems do not allow program, xPosition, yPosition attribute.
Can you give a sample?
I'm using an svg <pattern> with an <image> that references a <filter>. My image will be scaled down to fit using preserveAspectRatio. It works as expected on Chrome, and Edge, but on Firefox the <filter> tag causes the image to be unexpectedly cropped. I have tried many different ways of defining coordinates to attempt to avoid this problem but so far haven't found a solution.
Oddly, I just realized that if I set my screen scaling to 150% from 100% in Windows display settings, the problem goes away and firefox displays the same as Chrome.
So, questions:
Is this a bug in Firefox?
Is there a way I can stop it from happening (force expand the filter bounding box, I guess, except I've tried to do that every which way)?
Here is a codepen demonstrating the problem:
https://codepen.io/foobarbecue/pen/xvpOBm
Results on Chrome:
Results on Firefox:
Code:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<svg height="500" width="500">
<filter id="blur">
<feGaussianBlur stdDeviation="0"></feGaussianBlur>
</filter>
<pattern id="imgpattern" x="0" y="0" width="1" height="1"
viewBox="0 0 1024 576" preserveAspectRatio="xMidYMid slice" >
<image width="1024" height="576" xlink:href="http://i.stack.imgur.com/4SrQ8.jpg" filter="url(#blur)"/>
</pattern>
<path class="hexTile" d="M75 -1 h150 l75 129.90 l-75 129.90 h-150 l-75 -129.9 Z"
fill=url("#imgpattern")
stroke="black"></path>
</svg>
</body>
</html>
This is a Firefox bug - but there seems to be a workaround. If you get rid of preserveAspectRatio/viewBox inside the pattern and instead set patternContentUnits to objectBoundingBox, express the filter stdDeviation as objectBoundingBox as well (although technically it shouldn't be) AND, choose magic values for the pattern dimensions - you can get something that works in Firefox. (The filter magically uncrops when the height is set to 1.2 - not 1.1, not 1.3 - just 1.2)
<svg x="0px" y="0px" height="500px" width="500px" >
<defs>
<filter id="blur" y="0%" height="100%" x="0%" width="100%">
<feGaussianBlur stdDeviation=".01"></feGaussianBlur>
</filter>
<pattern id="imgpattern" x="-.5" y="0" width="1.5" height="1.2"
patternContentUnits="objectBoundingBox">
<image width="2" height="1" xlink:href="http://i.stack.imgur.com/4SrQ8.jpg" filter="url(#blur)"/>
</pattern>
</defs>
<path class="hexTile" d="M75 0 h150 l75 129.90 l-75 129.90 h-150 l-75 -129.9 L 75 0"
fill=url("#imgpattern")
stroke="black" ></path>
</svg>
I have produced a tree diagram using svg as rectangular nodes in D3js. Here is the bl.ock for it:
http://bl.ocks.org/Coola85/2450007804d9508866616640ac1272b8/fea7a37158edf9accd749a6fa3399800bea9bbad
The output in the browser looks like this and the aim is to be able to save this as an SVG:
I use SVG Crowbar (https://nytimes.github.io/svg-crowbar/) to save the svg using Google Chrome.
When I try to open the svg in InkScape it pixelates the rectangles and it appears like this.
Adobe Illustrator completely fails to open the rectangles at all stating that a plugin is required. I searched everywhere but no such plugin exists.
I would like to find a way so that the images (in this case rectangles) still appear sharp and are vector paths/shapes.
The XML editor for inkscape shows that it is using the xlink:href for the svg file as shown below.
Here is the code for the Main SVG file output:
<?xml version="1.0" standalone="no"?>
<svg width="960" height="500" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="font-family:serif;height:500px;perspective-origin:480px 250px;transform-origin:480px 250px;width:960px;-moz-text-size-adjust:auto;">
<g transform="translate(120,20)" style="font-family:serif;height:auto;overflow:visible;overflow-x:visible;overflow-y:visible;perspective-origin:480px 250px;transform-origin:0px 0px;width:auto;-moz-text-size-adjust:auto;">
<path class="link" style="font-family:serif;height:auto;overflow:visible;overflow-x:visible;overflow-y:visible;perspective-origin:480px 250px;transform-origin:0px 0px;width:auto;-moz-text-size-adjust:auto;fill:none;stroke:rgb(255, 0, 0);stroke-width:2px;" d="M0,230C90,230 90,115 180,115" />
<path class="link" style="font-family:serif;height:auto;overflow:visible;overflow-x:visible;overflow-y:visible;perspective-origin:480px 250px;transform-origin:0px 0px;width:auto;-moz-text-size-adjust:auto;fill:none;stroke:rgb(0, 128, 0);stroke-width:2px;" d="M0,230C90,230 90,345 180,345" />
<g class="node" transform="translate(180,345)" style="font-family:serif;height:auto;overflow:visible;overflow-x:visible;overflow-y:visible;perspective-origin:480px 250px;transform-origin:0px 0px;width:auto;-moz-text-size-adjust:auto;">
<image xlink:href="rect2.svg" x="-12px" y="-12px" width="24px" height="24px" style="font-family:serif;height:auto;perspective-origin:480px 250px;transform-origin:0px 0px;width:auto;-moz-text-size-adjust:auto;" />
<text x="15" dy=".35em" text-anchor="start" style="font-family:sans-serif;font-size:12px;height:auto;line-height:14.4px;overflow:visible;overflow-x:visible;overflow-y:visible;perspective-origin:480px 250px;transform-origin:0px 0px;width:auto;-moz-text-size-adjust:auto;">Level 2: B</text>
</g>
<g class="node" transform="translate(180,115)" style="font-family:serif;height:auto;overflow:visible;overflow-x:visible;overflow-y:visible;perspective-origin:480px 250px;transform-origin:0px 0px;width:auto;-moz-text-size-adjust:auto;">
<image xlink:href="rect2.svg" x="-12px" y="-12px" width="24px" height="24px" style="font-family:serif;height:auto;perspective-origin:480px 250px;transform-origin:0px 0px;width:auto;-moz-text-size-adjust:auto;" />
<text x="15" dy=".35em" text-anchor="start" style="font-family:sans-serif;font-size:12px;height:auto;line-height:14.4px;overflow:visible;overflow-x:visible;overflow-y:visible;perspective-origin:480px 250px;transform-origin:0px 0px;width:auto;-moz-text-size-adjust:auto;">Level 2: A</text>
</g>
<g class="node" transform="translate(0,230)" style="font-family:serif;height:auto;overflow:visible;overflow-x:visible;overflow-y:visible;perspective-origin:480px 250px;transform-origin:0px 0px;width:auto;-moz-text-size-adjust:auto;">
<image xlink:href="rect.svg" x="-12px" y="-12px" width="24px" height="24px" style="font-family:serif;height:auto;perspective-origin:480px 250px;transform-origin:0px 0px;width:auto;-moz-text-size-adjust:auto;" />
<text x="-15" dy=".35em" text-anchor="end" style="font-family:sans-serif;font-size:12px;height:auto;line-height:14.4px;overflow:visible;overflow-x:visible;overflow-y:visible;perspective-origin:480px 250px;transform-origin:0px 0px;width:auto;-moz-text-size-adjust:auto;text-anchor:end;">Top Level</text>
</g>
</g>
</svg>
Any help is appreciated
This is to be expected in the current Inkscape version (0.92.3) and previous versions that support display of linked SVG files.
The next major version will still display embedded and linked SVG files as raster images, but it will allow you to set an import resolution, so you can make them large enough so they will appear crisp.
But this is just how it displays in Inkscape - if you plan to use the SVG file in a browser later, it doesn't matter if it looks ugly while you are editing it. It will look correct, if the browser (or whichever other program you plan to use) can display linked SVG images correctly.
If you need to export a PNG image, then you should consider importing the rectangles, maybe using clones. You can use the align+distribute dialog to swap positions of objects, this makes it easy to place them in the exact same location as they were before.
I'm trying to add a custom button to amcharts, just like the 'Show All' in the right corner with lens icon when zooming in, but, with different functionality.
i.e http://www.amcharts.com/demos/chart-with-gaps-in-data/
I could't find it in the API reference, I was wondering if such functionality exists?
What I have in mind is,
add a label with a class using
allLabels: [{... 'id': 'custom-button'}];
then replace that label with the similar SVG code as the 'Show all' button
$('.custom-button').replaceWith(...);
<g transform="translate(962,48)" visibility="visible">
<rect x="0.5" y="0.5" width="96" height="33" rx="0" ry="0" stroke-width="1" fill="#000000" stroke="#000000" fill-opacity="1" stroke-opacity="1" opacity="0" transform="translate(-8,-8)" class="amcharts-zoom-out-bg"></rect>
<image x="0" y="0" width="19" height="19" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://www.amcharts.com/lib/3/images/lens.svg" class="amcharts-zoom-out-image"></image>
<text y="7" fill="#000000" font-family="Lato" font-size="14px" opacity="1" text-anchor="start" class="amcharts-zoom-out-label" transform="translate(24,7)"><tspan y="7" x="0">Show all</tspan></text>
</g>
lastly, create handler for 'click' event with $('..').on('click', function(){...})
Is there more clean solution?
As the question explains itself i've a button like firebug and i wanted to set there a number when some events happens like firebug doeas when it detects errors on the page.
Does anyone know how to set it?
This is the code of the top button that displays a panel, so i want to set there a number when certains events happens..
<panel id="asv-panel">
<hbox align="start">
<vbox>
<hbox align="center" style="background-color:#ffffff">
<image id="asvbutton-panel-icon" width="200px" height="50px" style="margin-left:10px"/>
</hbox>
<hbox style="background-color:#fff" id="menuPanelContainer">
<html:div style="margin-top:20px;margin-left:20px;width:150px" id="menuLogginInicial">
<description value="&asbutton.Signin;"/>
<html:hr/>
<image id="asvbutton-logoface" width="50px" height="50px" style="cursor:pointer" onclick="asvbutton.login();"/>
<image id="asvbutton-logogoogle" width="47px" height="45px" style="align:left;cursor:pointer"/>
<image id="asvbutton-logotwitter" width="50px" height="50px" style="align:left;cursor:pointer"/>
</html:div>
</hbox>
</vbox>
</hbox>
</panel>
</toolbarbutton>
After thousands of pages and samples... the easiest way was creating a div and doing an appendChild to it (old school method) :D
Hope this helps someone.