On my home page I am trying to insert an svg with clickable parts that link to other webpages. I made this svg with Illustrator and when I open it in a browser directly everything works the way it should. However, once I place this svg on my webpage, upon clicking it, it seems to open an image instead of opening the actual page it is linked to. If you rightclick and click on 'open in new tab' or 'open in new window' it does open the link.
The svg is displayed on www.unfoldmyworld.com, it is the worldmap with the clickable images.
Here is a snippet of code from the svg regarding a clickable area:
<a xlink:href="http://www.unfoldmyworld.com/Africa" xlink:show="replace">
<polygon id="Box-1" fill="#FFFFFF" opacity="0" points="366.938,336.958 461.559,
336.946 461.583,409.583 481.003,409.56 480.979,449.266 441.263,449.266 441.28,
431.596 366.938,431.58 "/>
In order to get the svg onto my wordpress elementor page I installed the plugin svg support. I already tried putting in xlink:show="new" and target="_blank" which did not do the trick. I have also tried putting the whole svg inline in an html code box, which resulted in the same issue. If anyone can tell me what I have to do to get these links to actually open the intended page in the current window (not in a new one), that would be greatly appreciated.
I managed to find a solution to this problem myself. It turns out that this issue is caused by Elementor. It automatically opens a lightbox when clicked on the link. To solve this issue the data-elementor-open-lightbox="no" attribute needs to be added to the link within the svg file.
Related
I'm using Next.js and I have a couple of SVG files inside the public directory:
/public/branding/logo.svg
/public/branding/brand.svg
/public/branding/slogan.svg
And I'm using img tag to load them:
<img src='/branding/logo.svg' />
However, the image is not shown. But I can right click on the image src in Google Chrome's Dev Tools and open the SVG in a new tab and see its content.
Though I see this message:
This XML file does not appear to have any style information associated with it. The document tree is shown below.
What's wrong?
The problem is exactly that browser message:
This XML file does not appear to have any style information associated with it. The document tree is shown below.
If nextjs does not show your SVG image, first open that SVG inside a browser (Chrome for example). If it shows you that message, then SVG has problems. Replace it with another SVG and it should work. It worked for me.
So, we can say that nextjs only shows valid SVG files that browser can render. It took me some days to be solved though.
I have converted material svg as font icons in my project using GULP, similar to custom icon fonts. Occasionaly, these font-icons are appearing jumbled/empty and on refresh, all icons are arranged properly in the site.
Example: instagram icon instead of apple icon
This happens occasionally and only in published site, why is it happening like this and how to solve this?
Note: After adding text-rendering:optimizeLegibility; in font css , this issue started.
Thanks
In the video i uploaded on screencast you see the reload of my GWT Bootstrap3 (see https://gwtbootstrap3.github.io/gwtbootstrap3-demo/) project. The page I display is almost empty (so there are not other icons which need to be displayed).
The video starts when I hit the F5 key on my chrome browser. You'll notice that the screen reloads then the buttons show up as blank squares which are then filled oiut with the icons.
http://www.screencast.com/t/dd7B9lr6
How can I manage to show them up with their icons immediately
The buttons are placed within a Vertical Panel as a ButtonToolbar within ButtonGroups
[...]
<g:VerticalPanel addStyleNames="{styles.tables.listBeanTable} ub-AbstractSummaryWidget">
<b:ButtonToolBar addStyleNames="{styles.summary.menuBar} hiddenPrint">
<b:ButtonGroup >
<b:Tooltip title="{msgs.refresh}" container="body">
<b:Button ui:field="refreshButton" icon="REFRESH"/>
</b:Tooltip>
<b:Tooltip title="Delete meeting" container="body">
<ui:attribute name="title" description="Label for button: delete meeting"/>
<b:Button ui:field="deleteMeetingButton" visible="false" icon="REMOVE"/>
</b:Tooltip>
[...]
I am not sure whether exactly when the icons are drawn to replace the squares. Is it with the call to " initWidget(uiBinder.createAndBindUi(this));" within the constructor class of the widget?
If you were about to say: hey buy a more powerfull laptop then it'll display faster. The gwtbootstrap3 example (e.g. https://gwtbootstrap3.github.io/gwtbootstrap3-demo/#icons) ) shows up immediately correct.
Thanks for any help
Hannes
The icons are loaded from Font Awesome. They are just <i> tags with the appropriate CSS style applied - this style forces the content of the <i> tag to become the desired icon. My bet is that the problem is that the font is not being loaded "fast enough". Maybe it's not cached? Maybe it's loaded from a slower server? Check your browser's developer tools to see from where the font is loaded and how long it takes. It should loaded from a folder relative to your webapp, unless maybe when you are using the GwtBootstrap3CDN.gwt.xml module.
What really resolved the issue was the change to gwt 2.7. all performance issues disappeared.
Furthermore in the case above it helped a bit to set the ButtonToolBar invisible (setVisible("false")) in the ui.xml. and at the end of the Ctor make it visible "setVisible("true).
How can I easily copy the whole CSS file a website uses to stylize HTML with Google Chrome, Firefox, Safari, and Opera?
With the web inspector, I can see the css styles applied to an element, but I can't see the big picture of styles applied to the whole HTML document.
Can you show me how can I do this?
For chrome you can use Quick Source Viewer to see all CSS, whether in the body or the head, whether in the served HTML or injected at runtime.
It is better than the dev tools as you don't have to go looking for the style tags, and saving them is just a right click on the link.
The answer given by Bobby Russell is not correct in this case.
Just follow the steps:
Open the Firefox and type google.com in the url
Now Inspect the googlepage with the help of firebug.
You can see in the attached image how to select the css file
Right click the page and view the source.
Ctrl+F link rel="stylesheet" type="text/css" href="
Follow the link
See the CSS
Not too hard...right?
I've added a jpg file to the App_localResources folder and in the document properites specified the photo in the Background propery. In the designer it shows up as the background but when i run the page i still get the white page background.
There's no distinctly ASP.Net way of doing this.
The canonical HTML way is to include this CSS:
body { background-image: url('background.jpg'); }
If you defined the body tag with runat="server" you could add the style inline using the Attributes property, but this wouldn't be a good idea. Layout details like this should go in the Stylesheet.
Guessing that perhaps you have a stylesheet which might be overriding the background?
I would check if the built in web server was still running and stop it, then re-run your application.
* Right click on the tray icon and select "Stop".
The page is being cached, you should see your changes now.
I used fiddler to trace the calls on the image. App_LocalResources\*.jpg return an 403 error. The App_LocalResources folder is really for use for localization. If I move the image into an image folder it works fine.
Also rather than setting the Background property, use the Style property and the background property there.
Sometimes you need to clear the cache of the browser after making changes to backgrounds and colors in order for it to apply when you run the site the next time.
Take a look here:
http://www.wikihow.com/Clear-Your-Browser%27s-Cache