I'm importing a PNG image and passing it to an external component (#react-google-maps) to use as an icon. PNG import works fine, but the SVG file does not.
I've never worked with SVGs before so I must be misunderstanding something.
Might I be handling
import testSVG from './assets/m3.svg'
incorrectly?
You can see in my example here that under map2:67 using testPNG works but testSVG does not.
This is where #react-google-maps plugs the path into an <img> tag:
img = "<img src='" + this.url + "' style='position: absolute; top: " + spriteV + "px; left: " + spriteH + "px; "
//#ts-ignore
if (!this.cluster.getClusterer().enableRetinaIcons) {
img += "clip: rect(" + (-1 * spriteV) + "px, " + ((-1 * spriteH) + this.width) + "px, " +
((-1 * spriteV) + this.height) + "px, " + (-1 * spriteH) + "px);"
}
msg += "'>"
However, I don't believe that is causing an issue, because non-local SVG files work just fine.
Related
I'm trying to add css from my controller because I need to pass some data that I calculate in it, but I don't know if it's possible, I can only find the syntax with javascript but spaui5 doesn't support it. What I'm trying to do is the following:
var horaHand = that.getView().byId("horaHand");
var minutoHand = that.getView().byId("minutoHand");
var segundoHand = that.getView().byId("segundoHand");
var manillahora = hora + minuto/12;
horaHand.css("transform", "rotate(" + manillahora + "deg)");
minutoHand.css("transform", "rotate(" + minuto + "deg)");
segundoHand.css("transform", "rotate(" + segundo + "deg)");
but it doesn't work. Is there any way I can apply this css?
The original javascript code I'm trying is this:
const hourHand = document.querySelector('#hourHand');
const minuteHand = document.querySelector('#minuteHand');
const secondHand = document.querySelector('#secondHand');
hourHand.style.transform = `rotateZ(${(hours)+(minutes/12)}deg)`;
minuteHand.style.transform = `rotateZ(${minutes}deg)`;
secondHand.style.transform = `rotateZ(${seconds}deg)`;
or this
$('.hour-hand').css({
'transform': `rotate(${hourDegrees}deg)`
});
$('.minute-hand').css({
'transform': `rotate(${minuteDegrees}deg)`
});
$('.second-hand').css({
'transform': `rotate(${secondDegrees}deg)`
});
I solved the problem like this:
$(".hora").css("transform", "rotate(" + hourDegrees + "deg)");
$(".minuto").css("transform", "rotate(" + minuteDegrees + "deg)");
$(".segundo").css("transform", "rotate(" + secondDegrees + "deg)");
but as everybody know, SAPUI5 css only works if you put !important, because of this the code above didn't work. Do you know how can I put put !important in the code in the controller? I tried like this: $(".hora").css("transform", "rotate(" + hourDegrees + "deg) !important"); but doesn't work.
I have create one flow diagram on user choice. On selecting option a line should be drawn.
Line is properly created but it is resetting the option that user selected.
var htmlLine = "<div style='padding:0px; margin:0px; height:" + thickness + "px; background-color:" + color + "; line-height:1px; position:absolute; left:" + cx + "px; top:" + cy + "px; width:" + length + "px;behavior:url(Scripts/-ms-transform.htc); -moz-transform:rotate(" + angle + "deg); -webkit-transform:rotate(" + angle + "deg); -o-transform:rotate(" + angle + "deg); -ms-transform:rotate(" + angle + "deg); transform:rotate(" + angle + "deg);'><hr></div>";
//
//alert(htmlLine);
document.body.innerHTML += htmlLine;
last line is creating some problem. when last line is commented everything is fine.
Please help me...!!!
one problem i see in your code is that you use single quotations on style.
You must have something like this : style=".....". You can escape the double quotations by using the '\' . Your code will look like this :
var htmlLine = "<div style=\"padding:0px;...etc
-> the double quotation is escaped by the \ character
I want to visualize data as a tree, but also I want to customize default link appearance. There shown default appearance, but I want to create links which looks like Rational Software Architect links. Is it possible?
The links are SVG path elements. You can style them using CSS to change the color, width etc. For the arrow heads, you can use SVG Markers. To add labels, you would need to add additional SVG text elements. You could for example add a new select with the tree links as data that create the SVG text elements for the UML cardinality.
I've done it with writing my own path handler. Here is the sample code:
function elbow(d) {
var radius = 10;
var xOffsetSign = Math.sign(d.source.x - d.target.x);
var yOffsetSign = Math.sign(d.source.y - d.target.y);
if (xOffsetSign != 0) {
var ellipseXDirection = (xOffsetSign * yOffsetSign) > 0 ? 1 : 0;
return "M" + d.source.x + "," + d.source.y
+ " H" + (d.target.x + xOffsetSign * radius)
+ " A" + radius + "," + radius + " 0 0," + ellipseXDirection + " " + d.target.x + "," + (d.source.y - yOffsetSign * radius)
+ " V" + d.target.y
+ (d.target.children ? "" : "h" + margin.right);
} else {
return "M" + d.source.x + "," + d.source.y
+ " H" + d.target.x + " V" + d.target.y
+ (d.target.children ? "" : "h" + margin.right);
}
}
Function Math.sign is my own implementation
I have a box that previews a Box Shadow. The user types in the inputs for the lenghts, blur, spread and colour (hex). So far I have this for the output of the style but it obviously doesn't work.
document.getElementById('jj_preview3').style["boxShadow"] = jj_input6 + 'px' + jj_input7 + 'px' + jj_input8 + 'px' + jj_input9 + '#' + jj_input10;
jj_input6 = Horizontal Length
jj_input7 = Vertical Length
jj_input8 = Blue Radius
jj_input9 = Spread
jj_input10 = Shadow Colour
What changes do I have to make the the javascript code snippet above to make it work?
It should work if you put in spaces. You're also missing 'px' in the last string literal.
document.getElementById('jj_preview3').style['boxShadow'] = jj_input6 + 'px ' +
jj_input7 + 'px ' + jj_input8 + 'px ' + jj_input9 + 'px #' + jj_input10;
Simply for future references:
var someVariable = document.getElementById("someId")
someVariable.style.boxShadow = "5px 5px 1.2em black";
Note: The 1.2em is for the blur effect, but px could be used as well, or it can be omitted all together.
Okay, I'll be the first to admit that i'm quite terrible when it comes to css, but I try... :D
I have this JS Function which I use to create rounded corners using images, instead of the standard div in div in div way. I know there are better ways, but this is how i've done it:
function applyHorizontalImageCornersSpecific(div, left, middle, right, leftWidth, rightWidth, height, type) {
var title = div.html();
div.html("");
div.append('<div>' + title + '</div>');
div.css("position", "relative");
div.css("z-index", "2");
div.prepend('<img src="' + left + '" style=" position:absolute; width:' + leftWidth + ';z-index:-1;"/>');
div.prepend('<img src="' + middle + '" style=" position:absolute;z-index:-2; width:100%; height:' + height + '; "/>');
//div.prepend('<div style="position:relative; margin-left:' + leftWidth + ';margin-right:' + rightWidth + ';"><img src="' + middle + '" style="position:absolute;z-index:-2; width:100%; height:' + height + '; "/></div>');
div.prepend('<img src="' + right + '" style=" position:absolute; width:' + rightWidth + '; right:0px;z-index:-1;"/>');
div.css("height", height);
}
div is the div object being passed to the function $("#divid") for example.
left, middle and right are the image locations.
leftwidth, rightwidth and height are pretty self explanitory.
Now the problem - Using IE 8, the div(which is a rounded title bar) draws perfectly when using the commented out line
div.prepend('<div style="position:relative; margin-left:' + leftWidth + ';margin-right:' + rightWidth + ';"><img src="' + middle + '" style="position:absolute;z-index:-2; width:100%; height:' + height + '; "/></div>');
and the active line
div.prepend('<img src="' + middle + '" style=" position:absolute;z-index:-2; width:100%; height:' + height + '; "/>');
But IE 7 only works with the active line.
The left and middle images are drawn in IE 7 but not the right image and the div content(title).
The active line for both IE 7 and IE 8 renders the left and right images usless as they both(left and right) sit over the center image, so any transparency only shows the center image and not the body background.
Any and All help is, as usual, really appreciated.
If you're not aware of this already, there is a rather elegant way in CSS to create a rounded corner:
-moz-border-radius: 15px; /* where the 15px is the degree of rounding */
border-radius: 15px;
This is only supported in newer browsers (IE7, for example, will still have square borders).
Additionally, I noticed you said that this was for a rounded title bar. Wouldn't it be easier if you just used a photo-editing software like GIMP or PS to create a rounded image? This would solve the problem of cross-browser compatibility as well as the problem of obtrusive JavaScript not gracefully degrading (if JavaScript is disabled, the user does not get the image!)
While i'm sure this won't help anyone - for completeness my solution was to set the z-index on the appended div instead of the passed div:
function applyHorizontalImageCornersSpecific(div, left, middle, right, leftWidth, rightWidth, height, type) {
var title = div.html();
div.html("");
div.append('<div style="z-index:5">' + title + '</div>');
div.css("position", "relative");
div.prepend('<img src="' + left + '" style=" position:absolute; width:' + leftWidth + ';z-index:-1;"/>');
div.prepend('<div style="position:relative; margin-left:' + leftWidth + ';margin-right:' + rightWidth + ';z-index:-2;"><img src="' + middle + '" style="position:absolute; width:100%; height:' + height + '; "/></div>');
div.prepend('<img src="' + right + '" style=" position:absolute; width:' + rightWidth + '; right:0px;z-index:-1;"/>');
div.css("height", height);
}