When in Raphael I set color to 90-#7ADADD-#338A93 on path it becomes gradient. Then when I inspect element I can see it's fill property is set to something like: url(#490-_7ADADD-_338A93).
If I try to change it to 90-#7ADADD-#338A93 it becomes black.
The question is how to change gradient color externally? How can I calculate this url(#490-_7ADADD-_338A93) from my original 90-#7ADADD-#338A93?
If you look at the full SVG source it might look something like this
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<linearGradient id="490-_7ADADD-_338A93" x1="0%" y1="0%" x2="100%" y2="0%">
....
</linearGradient>
</defs>
<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#490-_7ADADD-_338A93)" />
</svg>
The url(...) part is actually a reference to a gradient defined in defs. If you change the reference to something that doesn't exist it will be displayed with a black fill.
The logical thing to do in Raphael is keep your gradient manipulation within the library. If you do...
path.attr({"fill": "90-#fff-#000"})
path.attr({"fill": "90-#ccc-#666"})
Then Raphael will insert a new linearGradient and reference it for you.
If you really need to manipulate the SVG source then you can do something like...
var gradient = document.getElementById('490-_7ADADD-_338A93');
var stops = gradient.querySelectorAll('stop');
stops[0].setAttribute("stop-color", "#c00");
stops[1].setAttribute("stop-color", "#00c");
But this will break VML compatibility (IE 8 or less).
Related
I'm trying to implement webcomponents with a parent/child relationship, and it seems like what I want to do is impossible. Please tell me I'm wrong!
I'm trying to build a grid layout. I have a component called grid and one called cell, a grid will contain multiple cell children.
I want to encapsulate the particular way I'm implementing the layout. I might use CSS grid, I might use a table, I might do all the rendering in SVG. I want the number of rows and columns to be properties of a grid and the specific row/column to be properties of a cell.
In this case I'm using CSS grid, and I'm generating my webcomponents using Svelte. I don't think Svelte is the problem, I think it's inherent to how webcomponents work.
So I want to be able to write:
<grid rows="3" cols="3">
<cell row="1" col="1" />
<cell row="1" col="2" />
...
</grid>
My resulting DOM looks like this in the inspector:
<grid cols="3" rows="3">
#shadow-root /* style includes display:grid, columns and rows settings */
<cell col="1" row="1">
#shadow-root /* style includes grid-column:1; grid-row:1; */
<div>...</div>
</cell>
<cell col="1" row="2">
#shadow-root /* style includes grid-column:1; grid-row:2; */
<div>...</div>
</cell>
...
</grid>
The grid component has all the CSS styles to display a 3x3 grid. And it does show a grid, but the cells aren't in the correct order.
The problem is that the grid-column and grid-row CSS attributes for the cells are set in their shadow-roots and apply to their divs. The immediate children of the HTML element that has display: grid; as a style are the cells, and they don't have grid-column or grid-row styles. The div under each of the cell's shadow-root has those styles. So those styles are ignored and the cells get laid out in the order they appear in the DOM.
I can get it to lay out correctly by rendering each cell with its own style setting the row/column, as in:
<grid rows="3" cols="3">
<cell style="grid-column:1; grid-row:1" />
...
</grid>
But now I have a leaky abstraction, the user of the grid and cell webcomponents has to know that grid uses CSS grid to do its layout, and has to apply CSS grid styles to the cells to place them correctly. I want to encapsulate this parent/child implementation detail entirely within the webcomponents.
Unless there's a way, in a webcomponent, to apply a CSS style to the component itself, above the shadow-root, it seems like what I'm trying to do is impossible. Is this an inherent limitation of webcomponents?
Thanks for your help!
To answer my own question: yes, you can access the webcomponent from within, penetrating the shadowRoot upwards.
In CSS, you can access the component with the :host selector. In my case, I use CSS vars:
:host {
grid-column: var(--cell-col);
grid-row: var(--cell-row);
}
I still need to set the values of the variables in the DOM, and setting them in the top-level element of the component (the div) won't work. In Svelte, I can use bind:this to bind the div element to a variable (topEl). Then I add an onMount handler that navigates up from the topEl to its host and sets the CSS variables from the Svelte component variables:
onMount(() => {
topEl.parentNode.host.style.cssText += `--cell-col:${col} --cell-row:${row}`
})
I am looking for the range bar which is rotated 90 deg(vertically). When it is rotated vertically I am unable to select to the respective step points in the range bar. Whenever the knob is tried to move is it not moving to the desired step points. The touch functionality is not smooth.
The following is the css:
I am rotating the component using the following CSS. After applying this css property transform: rotate(-90deg) the ion-range step is not properly working in the UI(i.e.,The range slider is not moving properly).If any alternate solution apart from this css property I am open for your suggessions.
ion-range { [The following has the final Rangebar I am looking for ][1]
transform: rotate(-90deg);
position: relative;
}
The following is the html
<ion-range min="1" max="5" step="1" snaps="true" color="primary"
[(ngModel)]="abc"></ion-range>
![1]: https://i.stack.imgur.com/aODnC.png
I'd like to prevent a specific slide of my deck to become blurry when moving to next slide.
How can I achieve that?
In the default themes, incrementally displayed elements that are not active anymore are made half-opaque (blurry). You can thus force a given element to be always fully opaque.
For example, you can replace :
<div class="slide">should stay opaque</div>
by
<div class="slide" style="opacity: 1.0" >should stay opaque</div>
Alternatively, if you are used to CSS, you can also modify the stylesheet and for example add a class "stay" to your element and, in your CSS:
.stay { opacity: 1.0 !important; }
The closest I have been able to get is using this code
<cfset Background = ImageNew("",1725,2625)>
<cfimage source="#APPLICATION.config.serverpath#/ad1.tif" name="ad1">
<cfset height1 = ImageGetHeight(ad1)>
<cfset width1 = ImageGetWidth(ad1)>
<cfset resImage1 = ImageCopy(ad1,0,0, width1, height1)>
<cfset ImagePaste(Background,resImage1,150,150)>
<cfdocument format="pdf" pagetype="custom" pagewidth="5.75" pageheight="8.75" fontembed="no" name="temp" margintop="0" marginbottom="0" marginleft="0" marginright="0">
<div style="position:absolute; top:0; left:0; right:0; bottom:0; z-index:0;width:100%;height:100%;">
<cfimage action="writeToBrowser" source="#Background#" style="width:1740px; height: 2650px;">
</cfdocument>
This gets me very close to the exact duplicate of my TIF image, but for some reason the image is reduced by like 5 pixels on the width, and I cannot figure out why.
A bit more details:
The ad1.tif image is 1425x1125, the final pdf document that gets produced is 1725x2625. As you can see I use 5.75 x 8.75 inches on the cfdocument. This translates in the PDF document being 300DPI. When I load up the PDF document in photoshop it does state the document is in 300DPI.
You might notice that the ImageNew uses 1725x2625 and the cfimage uses 1740x2625. If I matched the cfimage dimensions to the imagenew (which makes perfect sense), then you end up with having this white border on the top, right, and bottom. The image is still off by like 5 pixels on the width. So I am forced to make it a bit bigger to get rid of that white border. If I can just figure out why that image is 5 pixels off.
Well obviously your original question has been answered, but for the image resolution issue, you might try adding scale="100" to your cfdocument tag. That might prevent it scaling the image down (which is the same thing as lowering resolution). I'm not sure it will work, since I haven't tried it.
As a side note, I don't understand why people keep answering questions in the comments instead of in the answers.
I have a spark list component and a corresponding custom itemrenderer:
list component:
<s:List id="albumImagesList" itemRenderer="the.namespace.for.XYZImageRenderer" useVirtualLayout="false" width="400" height="160">
<s:layout>
<s:TileLayout requestedColumnCount="5"
requestedRowCount="2"
rowHeight="80"
columnWidth="80"
horizontalGap="0"
verticalGap="0" />
</s:layout>
</s:List>
item renderer:
<?xml version="1.0" encoding="utf-8"?>
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
autoDrawBackground="true" width="100%" height="100%">
<s:states>
<s:State name="normal" />
</s:states>
<s:BitmapImage source="{data.image_path}" width="70" height="70" horizontalCenter="0" verticalCenter="0" />
</s:ItemRenderer>
It's all fine and dandy, the data gets populated correctly and I verified that the data.image_path property arrives safe and sound inside the itemrenderer.
My only problem is: the image is not displaying. I am not sure if it doesn't render at all or if it's just not visible somehow.
Does anyone see something at first glance? Am I doing something fundamentally wrong here? I worked with mx item renderers before and I never had so much trouble with those.
after a little bit of fumbling and checking i suppose this is the answer to my question. maybe someone can confirm this, but i think it is pretty much spot on:
the "bitmapimage" can only load data from trusted (crossdomain-policy'ed) domains. so with local files it is no problem, but i was loading remote images and with that the bitmapimage silently shuts down and does nothing. no get request, nothing.
the old "image" can load stuff no matter where it originated and so i am now switching to this as a solution.
BitMapImage.source expects one of three things. To quote from docs:
A Bitmap or BitmapData instance.
A class representing a subclass of DisplayObject. The BitmapFill instantiates the class and creates a bitmap rendering of it.
An instance of a DisplayObject. The BitmapFill copies it into a Bitmap for filling.
It sounds like you're giving it a URL location. If so, then use an Image, not BitMapImage.
phew, ok got it fixed using this guy's approach:
http://polygeek.com/2452_flex_extending-spark-bitmapimage
maybe it's going to be of help for someone.
cheers!