The SVG on my UXP application isn't rendering correctly after I have moved to webpack 5 configuration.
I have tried a lot of ways to render it, like the ways mentioned here, but none seem to be working.
Does anyone know what I could be missing?
Image for reference
Related
The problem that I have is the following:
An image of the problem
As you can see, the alt works and only that works.
The code for the < img>:
<img src="imagens/peninsula.png" class="ideia-imagens" alt="choose places">
I've searched for different solutions, but most of them were just to change the relative path. I tried to do that, but none of them worked.
I'm using Node.JS and ExpressJS on my Heroku app. I have a public folder. The images are in public/imagens.
EDIT: I have three images like this, got two of them working just by letting them written like the code up there, but this one isn't working yet.
I've a matter with this code, why do the foreignObject children go out from the mask ?
Here's my code http://jsbin.com/ehukom/2/
.posand .pos2should be in the mask... Where's my error?
I assume your errors are
trying only Chrome (have a look at Firefox as well) and
assuming that Chrome is right and you're in error.
The only good fix to this problem I can think of is reporting a bug.
I just started trying out the TideSDK to deploy a website to .exe and .app, which for the most part is fantastic.
The problem that I'm currently coming across is that all my CSS styles are written in .less styles utilizing the less.js framework. Inside of here, I have custom font-faces declared, and when deployed to a standard web browser, they apply fine to all the elements that use them.
When deployed through Tide, it doesn't seem to stick unless I take all my styling out of .less style sheets and put them back into regular .CSS files, which leads me to believe that there is some sort of compile time change that Tide is using internally when deployed the actual view of the application.
I have no idea how to go about fixing this. As a note, I'm not getting any
[Error] Error finding
errors from the Tide console, which leads me to believe that the .svg's are being found, just not applied.
UPDATE:
It seems I was using wrong syntax in the src: url('...'), so the CSS in the .less file was actually failing silently. I'm getting a pretty strange [Error] Error finding... file for the .svg now. The URL that is inside this line of CSS is being prepended by app: 3 times.
After several hours of looking at this problem, I eventually have figured it out. Couple of things to note when you are using the combination of these frameworks:
less.js spits out really odd path directories when using
src: url('...');
As a solution for this, you can use the import directive that is available to you in less and put the #font-face declarations inside of that .css style sheet. By importing a plain .css style sheet, you are telling less.js to treat it as regular .css, and the muxed url that gets spit out won't happen.
#import "../css/style.css";
After putting the import directive and confirming that the SVG was indeed being generated under Resources - Fonts in the Chrome inspector, I proceeded to take a look at the SVG file itself to determine if there was something wrong in the CSS naming conventions for the SVG file. According to this answer, and the blog post within it, your SVG name should be using:
font-family
value in the naming scheme from the SVG meta data
src: url('YourSVGFont.svg#Silkscreen') format('svg');
when in fact, you should be using the font id, at least that was the solution in my case:
src: url('YourSVGFont.svg#slkscrb') format('svg');
This is the image embedded in the blog post so that you can see what I'm talking about, and see where in the SVG meta data these two names are placed.
I have spent hours with this issue. I'm about ready to tear my project apart, line by line to get this figured out. But I was wondering if anyone else had this issue:
My project works great in Firefox. My customers use IE (classic - alot of people do...). My boss wants me to get this done yesterday.
I can't get IE 8 or 9 (with my document in IE 7 emulation mode) to run the following, and load the TabView. I get an error in the debugger console that telling me that it doesn't load it. I have all the required modules for tabview loaded via tags, so there is no dependence on an Internet connection - offline operation (again.. works great in Firefox).
YUI({bootstrap:false,insertBefore: 'yui3-style-overrides', filter: ''}).use('tabview','tabview-base','event-synthetic','event','event-custom','event-mouseenter','oop','yui','dom','dom-base','node','io','datasource','resize','anim','anim-easing','event-base-ie','dom-style-ie','node-focusmanager','node-event-simulate','plugin','classnamemanager','pluginhost','event-base','tabview-plugin','attribute','base','widget','widget-base-ie','arraylist','widget-parent','widget-child','event-simulate',function(Y) {
/* sand boxed code here */
});
Recently yui (3.2 or 3.3) factored out their ie fixes into separate files in the build. This caused a nightmare for me as well. You could test it with 3.1.1 if you want to isolate your variables.
What contributed more to my insanity was that I was stupid enough to use the YUI PHP Loader, which gets worse with every YUI release because YUI is getting so many dependencies even hacked up crap like the PHP Loader cannot account for all situations.
I worked around this by manually loading all the -ie- files using
<!--[if IE 7]><script type="text/javascript" src=myfile.js></script><![endif]-->
for a month or two before I was able to come up with a smarter but larger version of PHP Loader (Which, alas, I cannot share).
To see if this is your problem, use that if ie script above for every IE specific file in the build folder. Here is a list:
build/dom/dom-style-ie-debug.js
build/event/event-base-ie-debug.js
build/history/history-hash-ie-debug.js
build/scrollview/scrollview-base-ie-debug.js
build/widget/widget-base-ie-debug.js
If I were you, I'd manually load all of those except for maybe history, which you might not need - just so you can minimize your variables.
TBH, when I had this problem and troubleshot it, I loaded every yui JS file. It took a while, but the bug disappeared and I was hot on the trail of finding the -ie- files issue.
I'm learning how to use Draggable Views for Drupal 6 for the first time, following this tutorial: http://thedesignspace.net/MT2archives/000666.html . I'm encountering a problem though: in part 4, once I set up the draggable table ( http://thedesignspace.net/MT2archives/000708.html ) the entire preview disappears, showing no table. Switching the style to another type, such as table, brings everything back. Directly viewing the page from its path makes no difference. Any ideas of what the problem could be?
Not all of my modules were up to date when I encountered this problem. My mistake. Always update all modules first upon being stumped by incompatibility errors, even if the modules in question do not seem to have anything to do with the error.