I'm trying to set the background image of a tag using the background-image property and raw string data but it doesn't seem to work. Here is what I have:
backgroundImage: 'url("data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><rect width="300" height="100" style="fill:rgb(0,0,255)" /></svg>")'
I am using react and so this is being used inside jsx tags. Interestingly I can do this with an image tag and it works. I've tried various quotation combinations with no success.
Related
I'm familiar with using breakpoints to change my styling for height, width, font-size, and so on, but I'm having trouble finding examples of changing an image based on my screen size.
Specifically I want to replace the image with a new image depending on screen size. My assumption is that I want the image set up as its own component to start...
import React from "react";
export default function ResponsiveLogo() {
return(
<div>
<img src="https://dummyimage.com/420x200/4169e1/fff.png&text=Logo+Placeholder"
alt="logo placeholder"/>
</div>
)
}
I believe that I'm supposed to handle this using useMediaQuery but am unsure of the syntax. As I haven't used useMediaQuery before I'm looking for one example of doing this at one breakpoint so I know how to proceed.
as an example lets assume we want to change images for any screen smaller than Material-UI's "sm" breakpoint (600px), and we want to swap in this image: "https://dummyimage.com/200x200/4169e1/fff.png&text=Logo+Placeholder"
Thanks for any direction!
I found an easy way to do this on MUIv5 using MUI components, but you have to use the MUI Box component for the image element so you can access the sx prop. (They use Box for image examples in the official docs so I think it's recommended anyway)
The idea being, instead of setting the image source with the 'src' attribute, you set it via the 'content' CSS property within the sx prop. This way you can easily access MUI theme breakpoints when setting the image url:
import BigLogo from "../images/BigLogo.png";
import SmallLogo from "../images/SmallLogo.png";
<Box
component="img"
sx={{
content: {
xs: `url(${SmallLogo})`, //img src from xs up to md
md: `url(${BigLogo})`, //img src from md and up
}
}}
alt="Logo"
/>
There are several ways to accomplish this. If your image was a background for example you could change it the same way you use a CSS breakpoint to change any other CSS attribute.
However, since you're using an image element in the HTML, you can either watch for window size changes in javascript or use an HTML solution.
Option #1 Javascript:
window.onresize = function(){
if(window.width > 600){
// do something like change img src path
}
}
There are a lot of pitfalls to this approach. It can destroy performance if it's not implemented correctly and you need to figure out the sizing of the correct elements in JS.
Option #2 srcset or picture element and srcset
This is a way to build responsive images directly in HTML that allows multiple file paths for an image. An image on its own with srcset is a bit complicated (explained better in the link) so I prefer a <picture> element.
Inside your React component you would have something like this:
<picture>
<source media="(max-width: 400px)" srcset="mypic.jpg" >
<source media="(max-width: 1200px)" srcset="myOtherPic.png">
<img src="fallbackpic.gif" alt="alt text for pic">
</picture>
This is cool in that you can have as many source lines as you want each with a media query style condition. They can even be different file types and you can set each of them dynamically just like you would any other HTML element attribute.
The only catch is that <picture> is an HTML5 element so you need to target a newer browser for this to work.
I'm trying to use a symbol from my defs.svg as a background image in CSS, as opposed to a direct path to an individual SVG file.
So instead of:
background: url(spoon.svg);
I want to do something like this:
background: url(defs.svg#spoon);
With #spoon being a symbol in defs.svg with id="spoon". Unfortunately, this isn't working for me. Has anyone come across a solution that doesn't involve custom JS/etc?
You'd need to define view and use tags inside your defs.svg so CSS would know where to look and what to show.
So, for example, say you have inside your SVG a symbol defined as this:
<symbol id="poop" viewBox="0 0 100 100">
<!-- Your shapes here -->
</symbol>
And before closing the svg tag, you must add the view and use defining tags:
<view id="poop-view" viewBox="0 0 100 100" /><!-- This ID used here is what you'll use in your CSS! -->
<use xlink:href="poop" width="100" height="100" x="0" y="0"></use>
Note that at this point, you can open your raw SVG file in a browser and it will show your drawing - before it showed blank!
And now you can set your SVG symbol in your CSS:
div{background-image:url("defs.svg#poop-view")} /* Remember, it's the ID used on your <view> def! */
Also, be sure your SVG includes a xmlns:xlink namespace on the opening tag, or it won't be supposed to work.
Disclaimer: I'm trying to use this setup at work hosting the SVG file on a server on my university, but for some reason this doesn't work (even SVG files won't show if <?xml>and <!DOCTYPE> tags are missing on the SVG), so be sure to check the sanity of your SVG file.
Find more about this on Jennifer Hiller's codepen blog.
The Problem
I have an object for my SVG which is wrapped in an anchor. The problem I face is that I want my SVG to have hover styles but I also need it to be clickable, hence the need for the anchor.
My Object:
<a href="http://mylink.co.uk">
<object data="mysvg.svg" type="image/svg+xml">
<span>Your browser doesn't support SVG images</span>
</object>
</a>
The problem is that the object is an element that has interaction and upon hover it was not registering the anchor. To combat this I tried:
object{
pointer-events: none;
}
This solved that issue and let the be the clickable element. The downside is now my objects hover styles don't work because technically the object is not longer the element I'm hovering.
Before the object...
I originally adopted the method of using the xlink method:
<a href="#" class="my-button">
<svg viewBox="0 0 297 149" class="my-icon">
<use xlink:href="svgsprite.svg#my-icon"></use>
</svg>
</a>
But I faced real issues getting the SVG parts to style consistently across browsers. Chrome in particular didn't like it.
Is there a way I can get the indivdual parts of my SVG styled via CSS, i.e. the fill colours and still use it in the way I'm trying to do by wrapping it within an anchor? Is there a newer (better) approach?
You can find a working example to demonstrate my problem a little better. Please find that here.
It's not exactly clear from your question what exactly you are trying to do (a test case would be useful).
But have you tried the approach of using an SVG <a> element, rather than an HTML one? Perhaps that will help you avoid the issues you are having.
<svg viewBox="0 0 297 149" class="my-icon">
<a xlink:href="http://mylink.co.uk" class="my-button">
<use xlink:href="svgsprite.svg#my-icon"></use>
</a>
</svg>
SVG inherits some styling properties from external <a> elements in slightly unexpected ways. That may be the source of your styling woes.
I noticed there are two ways to reference SVG images. You can either use the standard <img> tag
<img src="picture.svg" alt="SVG Image"/>
or you can use <image> tag
<svg>
<image xlink:href="picture.svg" x="0" y="0" height="50px" width="50px"/>
</svg>
To me, it seems better to simply use the <img> tag because you get the alt attribute which makes it more search friendly and you also can apply styles via CSS. I was having trouble applying styles because the SVG <image> requires attributes.
I was wondering if there was a significant reason why you would use the SVG <image> tag over the standard <img>?
The <svg> element is used for putting inline SVG in your document. So in this case, if you want to avoid having to load an external file, you can put the contents of picture.svg directly between the <svg> and </svg> tags.
If that's not the intended purpose, and you just want to show an image that happens to be in SVG format, there's no real reason to put in inside an SVG block; just use <img>.
I have tried setting the background image this way, but it doesn't work. Any ideas how to set the background image of a rich text control in flex as easy as possible? Thanks
.rte{
...
backgroundImage: "assets/globe.jpg";
}
and
<mx:RichTextEditor id="rt"
...
styleName="rte"
/>
Unfortunately, you can't.
The docs for RichTextEditor show that it doesn't support a backgroundImage property, and the component is not skinnable.
Therefore, I'd suggest creating your own wrapper component, which accepts an image, like so:
<!-- Note: Using Canvas becuase your post indicates Flex 3, if using Flex 4, please use Group -->
<Canvas>
<mx:Image width="100%" height="100%" />
<RichTextEditor />
</Canvas>
The RichTextEditor component doesn't support background images last I checked. What you'd want to do is create a custom RTE skin where you add an image behind the actual text, then within the skin, have the do getStyle('backgroundImage') and set it in a bindable private var which is then binded to the image.
That's about it. It's either use this skin or you can always wrap your RTE within a BitmapImage or some other kind of component that supports background images.
EDIT: Sorry, didn't see that this was Flex3. In that case, you'll need to extend your RTE component and add the Image component manually by overriding the createChildren function and then changing the value of the image by overriding the updateDisplayList function using the same getStyle function as mentioned above.
It can be done by setting RTE TextArea's backgroundAlpha to 0
<mx:RichTextEditor id="richTextEditor"
backgroundImage="#Embed('<imagepath>')" width="100%" height="100%"
initialize="{richTextEditor.textArea.setStyle('backgroundAlpha', '0') }"
/>
Note:Please modify image path and you can also set style through CSS/Style tag
Hopefully this will helps