Comments (5)
Thanks for the suggestion but it won't cut it unfortunately. We decided to go through another route and stop using SVGs for this use case. It was getting too hacky
from svgren.
@Maxador Right, svgren
doesn't render <image>
elements.
Though, if you just need to achieve the same effect, i.e. blurred rectangle, you can use gaussian blur filter, like this:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="375" height="235" viewBox="0 0 375 235">
<defs>
<filter
style="color-interpolation-filters:sRGB"
id="the_blur_filter"
x="-20%"
width="140%"
y="-20%"
height="140%"
>
<feGaussianBlur
stdDeviation="10"
id="feGaussianBlur4620"
/>
</filter>
</defs>
<rect id="white_background" x="0" y="0" width="100%" height="100%" fill="white" />
<rect id="grey_blurred_rect" width="264" height="144" x="92" y="72" fill="grey" style="filter:url(#the_blur_filter)"/>
</svg>
from svgren.
Yeah I see, unfortunately I cannot do that because the same SVG is not rendering properly on another platform that doesn't handle filters/blurs properly.
from svgren.
I see. Well, let's keep this ticket open, but I'm not sure that drawing <image>
elements will be implemented anytime soon. It is tricky, as the element can have transformations and thus some kind of scaling/rotation/skewing algorithms for raster image will have to be implemented which is far not trivial task. Perhaps you could look for ways to make that another platform support blur filter to resolve your problem.
from svgren.
@Maxador as a workaround, maybe you could have both elements in your SVG, the raster image and the rect with blur effect. One of those will be rendered only on one platform, the other one - only on another platform. But this is a dirty workaround and may lead to sudden breakages in case something changes on any of the platforms regarding the <image>
element or blur support.
from svgren.
Related Issues (20)
- add <defs><style></style></defs> support HOT 8
- rgb(%) support HOT 6
- xi:include in svg HOT 1
- Render SVG file by string HOT 1
- cocoapods svgren not found HOT 4
- utki cocoapod doesn't have a lib HOT 5
- Support for stroke-dasharray and stroke-dashoffset HOT 4
- Unresolved external symbol HOT 6
- Not correctly displaying shapes. HOT 8
- Pixel layout & console output HOT 5
- division by 0
- compiling errors after update to the latest version HOT 5
- add <pattern> support
- No Images loaded since last Update HOT 46
- VS2017 v141 toolset link failed HOT 6
- Problem rendering Instagram logo HOT 5
- XCFramework support HOT 10
- Tutorial needs update: requires C++/17 standard, not C++/11 HOT 2
- Artifact when drawing SVG with `circle` HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from svgren.