I'm working with SVG using the Raphael library. I can apply a fill colour to an object like so:
circle.attr({fill: "#ff0000"});
And this also works (though the Raphael documentation doesn't mention it):
circle.attr({fill: "url(pattern.png)"});
I am able to use transparent PNGs as fill patterns, and transparency works as expected. The svg object is completely transparent where the fill pattern image is transparent. But what I would like to do is specify both a fill pattern image and a fill colour, so that the colour would show through where the pattern image is transparent - similar to the 'background' property using CSS, for example. Is this possible with SVG?
You can define a pattern that has a rect with a fill, and an image that is your png on top of that rect. Then use the pattern as fill for the circle (or whatever element you want).
This means stepping outside of Raphaël, or extending it to do what you want. Note that what ({fill: "url(pattern.png)"}) does is to create a pattern element and and append an image element pointing to the given url. It's quite possible to hack Raphaël to allow you to pass a color too, and then you deal with that in the code that creates the pattern by creating a rect of the same dimensions as the image with the given fill color.
I should say that if you want it to work with IE<9 then you probably need to implement it in VML too.
Other options include drawing two shapes, one with color fill and the other with the raster image fill. Yet another is to make the png include the background color so that it's not transparent.
Related
If I'm not missing something, there are two functions which allow me to explicitly clear a swap chain image: vkCmdClearColorImage and vkCmdClearAttachments.
However, I would like to clear on a specific rectangle and to a specific color. While vkCmdClearColorImage allows me to specify the color, I cannot specify the rectangle. And while vkCmdClearAttachments allows me to specify the rectangle, I cannot specify the color (I guess it's using the color color specified in the render pass).
So, is there anything I can do?
You give vkCmdClearAttachments an array of VkClearAttachment structs containing the clear color, for the attachments.
https://www.khronos.org/registry/vulkan/specs/1.2-extensions/man/html/vkCmdClearAttachments.html
https://www.khronos.org/registry/vulkan/specs/1.2-extensions/man/html/VkClearAttachment.html
I've been trying to figure this out for 2 days now, so I hope somebody can help.
I need to load in svg files that have multiple values of gray within them and tint them with colors. So for example, say the svg file is an image of a rock and has 4 values of gray. I need to be able to display the rock as red and keep the differences between values in the different child shapes. In other words, I would like it to work just like PImage.tint().
I see there are tint() and setTint() methods to PShape but I can't seem to get them to work. I also though about recursing through the child shapes and reading each color individually and recoloring appropriately, but I couldn't even figure out how to read the color out in a way I understand.
Help, anyone?
If you have it as an <img> you can use the CSS filter property with hue-rotate https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/hue-rotate
Or you add the svg directly to the html and add classes to your elements. Then you could change the colors in your script.
If this is a flat colour then you could use the alpha value in RGB colour value. See 'color transparency' in the following link: https://processing.org/tutorials/color/
The fill value is fill(red, green, blue, transparency)
I hope this helps. If you want to share code and have a reason for using PImage I'd be happy to have a look.
I use jvectormap. I create map. I need to save this svg map as image. I use a plugin named saveSvgAsPng.js. It works ok. My problem is that ,png image makes transparent. Is there a method that I remove svg background transparency?
Thanks in advance.
Have you tried looking at the usage Docs for saveSvgAsPng ?
https://github.com/exupero/saveSvgAsPng
saveSvgAsPng(document.getElementById("diagram"), "diagram.png", {backgroundColor: "white"});
Try and pass "white" or the HEX color value "#FFFFFF"
Pass backgroundColor in the options object:
Available Options:
backgroundColor — Creates a PNG with the given background color. Defaults to transparent.
scale — Changes the resolution of the output PNG. Defaults to 1, the same dimensions as the source SVG.
selectorRemap — A function that takes a CSS selector and produces its replacement in the CSS that's inlined into the SVG. Useful if your SVG style selectors are scoped by ancestor elements in your HTML document.
I am refering to a older question saying color blending with GDI+
Using GDI+ with Windows Forms, I want to be able to draw with a pen and blend color based on the destination pixel color.
For example, if I draw a line and it passes over black pixels, I want it to be a lighter color (like white for example) so that it's visible. When that same line passes over white pixels, it should be a darker color (black for example) so that it's still clearly visible.
the answers says to use a color matrix for transformation
so i started implementing it..
My image is present in raw data format in rgb48
Gdiplus::Bitmap image(input.width,input.height,input.width*6,PixelFormat48bppRGB,(unsigned char*)rgb48);
Gdiplus::Image *images= image.GetThumbnailImage(input.width,input.height);
Gdiplus::TextureBrush brush(images);
Gdiplus::Pen pen(&brush);
Gdiplus::ColorMatrix matrix={
-1.0f,0.0f,0.0f,0.0f,0.0f,
0.0f,-1.0f,0.0f,0.0f,0.0f,
0.0f,0.0f,-1.0f,0.0f,0.0f,
0.0f,0.0f,0.0f,1.0f,0.0f,
1.0f,1.0f,1.0f,0.0f,1.0f,
};
Gdiplus::Graphics gfx(&image1);
Gdiplus::ImageAttributes imageAttr;
imageAttr.SetColorMatrix(&matrix);
gfx.DrawImage(images,Gdiplus::Rect(0,0,input.width,input.height),0,0,1024,1024,Gdiplus::UnitPixel,&imageAttr);
I am not getting what i expect..Can some one help me in finding the mistake i m doing.
You can use the alpha component of a color to specify transparency, so that colors can be combined. However, if you want the combination to be something other than the alpha blend, you must draw the pixels yourself. You could first draw into a transparent bitmap, then render that onto the destination pixel by pixel.
In XAML there is the concept of a [Border] object that behaves much like an SVG rectangle except that a XAML [Border] can contain a child element.
So I could create a [Border] with a black stroke and inside it have another border that had a white stroke and a fill of Green.
This gives the the look of a single rectangle with both a black border & then an inner white border.
How can you create this in SVG?
You need multiple paths. In this particular case you could 'cheat' by having the same path twice, with the lower path having a larger border that appears 'outside' the upper object; in general, though you will need to create paths with offsets if you want this behavior.