I have some SVG graphics that I would like to apply conditional styling on (e.g. linearGradient when it's active). How would I go about achieving this? I'd rather not (if there's another way) have to go in a manually add a defs tag with linearGradients in there, and I've seen stuff about using an externals defs file to access the fill I want (so I can specify either a solid color or gradient depending on state). I'm not sure how to ask, or where to look.
An example:
An SVG file:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26">
<path d="M20.94 9.56c.74 0 1.35.62 1.35 1.38v1.84c0 3.79-2.48 7.85-6.44 8.81v1.36A3.02 3.02 0 0 1 12.88 26a3.02 3.02 0 0 1-2.97-3.05v-1.34c-3.36-.83-6.2-5.05-6.2-8.83v-1.84c0-.76.6-1.38 1.35-1.38.74 0 1.34.62 1.34 1.38v1.84a6.7 6.7 0 0 0 6.6 6.79 6.7 6.7 0 0 0 6.6-6.79v-1.84c0-.76.6-1.38 1.34-1.38ZM13.08 0c2.77 0 5 2.28 5 5.09v7.44c0 2.8-2.23 5.08-5 5.08-2.76 0-5-2.28-5-5.08V5.09a5.05 5.05 0 0 1 5-5.09Z" fill-rule="evenodd"/>
</svg>
Now - I have a LOT of these, so I was hoping I could link the gradient from an external source, or use some other way to just slap a linear gradient on top of them. Is there such a way? What would be the best way to add gradients to 100+ icons without having to go in and edit each one of them? Is there a bulk editor somewhere that I don't know about?
Related
I'd like to create a PathGeometry for a lock icon in xaml. Are there any tools to help me with that?
The way Geometry works seems complicated, but once you understand how it works, you can use Vector-based icons that are better than images. Give it a try it.
You can use Geometry in this way.
First, A string-based Geometry value is required.
M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z =
<Geometry x:Key="ICON">
M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z
</Geometry>
And Path is required to print Geometry on the screen.
<Path Data="{StaticResource ICON}" Width="48" Height="48"/>
It is recommended that the Path size is the same as the Path actual size. Because adjusting the size with ViewBox is a way to better utilize the characteristics of Vector.
Finaly
below is how to apply this method to use icons.
lock-outline
<Viewbox Width="48" Height="48">
<Canvas Width="24" Height="24">
<Path Fill="Black" Data="M12,17C10.89,17 10,16.1 10,15C10,13.89 10.89,13 12,13A2,2 0 0,1 14,15A2,2 0 0,1 12,17M18,20V10H6V20H18M18,8A2,2 0 0,1 20,10V20A2,2 0 0,1 18,22H6C4.89,22 4,21.1 4,20V10C4,8.89 4.89,8 6,8H7V6A5,5 0 0,1 12,1A5,5 0 0,1 17,6V8H18M12,3A3,3 0 0,0 9,6V8H15V6A3,3 0 0,0 12,3Z" />
</Canvas>
</Viewbox>
lock-open-variant-outline
<Viewbox Width="48" Height="48">
<Canvas Width="24" Height="24">
<Path Fill="Black" Data="M10 13C11.1 13 12 13.89 12 15C12 16.11 11.11 17 10 17S8 16.11 8 15 8.9 13 10 13M18 1C15.24 1 13 3.24 13 6V8H4C2.9 8 2 8.9 2 10V20C2 21.1 2.9 22 4 22H16C17.1 22 18 21.1 18 20V10C18 8.9 17.1 8 16 8H15V6C15 4.34 16.34 3 18 3S21 4.34 21 6V8H23V6C23 3.24 20.76 1 18 1M16 10V20H4V10H16Z" />
</Canvas>
</Viewbox>
And the site below offers many different open-source icons. You can choose it yourself and provide it with Xaml source code. I also use this website a lot. Here
I'm building a React app and I'm testing it with Cypress and React Testing library.
I was wondering: How can I test the app "on mobile". Meaning how can I write tests for the app that run if the window size is below the breakpoint? I couldn't find anything about that in the respective packages documentation.
You may need to check this page - https://docs.cypress.io/api/commands/viewport.html
You can control the size and orientation of the screen for your application. There are also preset dimensions available already for various devices,
Preset width height
macbook-15 1440 900
macbook-13 1280 800
macbook-11 1366 768
ipad-2 768 1024
ipad-mini 768 1024
iphone-6+ 414 736
iphone-6 375 667
iphone-5 320 568
iphone-4 320 480
iphone-3 320 480
Just need to pass cy.viewport('iphone-6') which will set the viewport to 375px x 667px. Hope this helps.
I am developing a webpart with for SharePoint. I use the SharePoint Framework, TypeScript and ReactJS.
I need to use svg image.
But when I paste my svg image code into my webpart, I have error and I can't build.
For the test, I use the base webpart generate by SharePoint when we create a new project.
When I build, I have this kind of error :
Error - typescript - src\webparts\graph\components\Graph.tsx(28,8): error TS1003: Identifier expected.
I created my svg with inkscape and I edited it to work with ReactJS.
Could you help me ?
The svg :
<svg
xmlns="http://www.w3.org/2000/svg"
version="1.1"
width="100%"
height="100%"
id="svg2">
<defs
id="defs4" />
<metadata
id="metadata7">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
id="layer1">
<path
d="m 560,315.21933 a 265.71429,234.28572 0 1 1 -531.428589,0 265.71429,234.28572 0 1 1 531.428589,0 z"
id="path2985"
style={{fill:#ffff00;fill-opacity:1;stroke:none}} />
</g>
</svg>
I finally find a solution.
I use svg to react cli (https://www.npmjs.com/package/svg-to-react-cli) to transform my svg into react component. Then I remove the tag defs and metadata. To finish, I paste my svg code in my react component. And it works fine.
The camera animation always starts from the initial camera pose.
We do not want this behaviour.
You can check this issue with:
https://app.3d.io/default_setup.
This code worked before. We didn't change anything.
<a-entity camera="" tour="autoStart: false" wasd-controls="" look-controls="" position="-2.073 1.6 -1.474" rotation="-2.063 203.308 0">
<a-entity tour-waypoint="Top View" io3d-uuid="add7b140-7563-463a-b324-75e2b460e915" position="-7.959815433483447 22.172638840745442 1.675735956699384" rotation="-89.9 450 0"></a-entity>
<a-entity tour-waypoint="Living" io3d-uuid="486a6760-e8d1-456d-a2d0-5358d65b2ef1" position="1.1168750348397785 1.037108274040117 1.7797448740972899" rotation="0 412.98472385428914 0"></a-entity>
<a-entity tour-waypoint="Kitchen" io3d-uuid="4a0f17c1-fcde-4706-9188-48ddeb808927" position="-0.4316313757947364 1.37 0.10205065263211961" rotation="0 491.46180963572306 0"></a-entity>
<a-entity tour-waypoint="Dining" io3d-uuid="5d76c74b-a2b5-4ddf-a6e9-a6fe009377b7" position="-1.0699430785395438 8 -3.5236261145326577" rotation="-38.48648648648648 539.873168157716 0"></a-entity>
<a-entity tour-waypoint="Bedroom" io3d-uuid="4d6fec29-1467-40be-8f91-5435f0317072" position="-9.650512503727434 8 2.1338268605968826" rotation="-59.152761457109314 594.7591069330199 0"></a-entity>
<a-entity tour-waypoint="Bedroom" io3d-uuid="3851ec4b-53c0-47d4-afc2-3d646043eb5d" position="-9.639031885443684 8 5.539305773258945" rotation="-56.77438307873098 400.8960173400832 0"></a-entity>
<a-entity tour-waypoint="Master Bedroom" io3d-uuid="97eabbe1-578a-48ee-a40f-60af0187f2b1" position="-13.334875006116892 8 -1.701906768812833" rotation="-59.08108108108104 494.6322427235562 0"></a-entity>
<a-entity tour-waypoint="Top View" io3d-uuid="fe33bb66-b1fe-4d13-9904-2e98fc05a525" position="-7.959815433483447 22.172638840745442 1.675735956699384" rotation="-89.9 450 0"></a-entity>
</a-entity>
This code doesn't work as desired either. The camera still kept same position.
document.querySelector('[camera]').components['tour'].updateViewPoint({position:{y:1.6}, rotation:{x:0}})
It turns out that there was a somewhat breaking change in aframe-animation-component moving to version 4.x.x and if you find yourself using the following way of including that component:
<script src="https://unpkg.com/aframe-animation-component/dist/aframe-animation-component.min.js"></script>
you wanna change it for this line:
<script src="https://unpkg.com/aframe-animation-component#3.2.5/dist/aframe-animation-component.min.js"></script>
The tour animation will always tween from the current camera position to the next tour point.
So what you want to do is set your camera to the starting position either in aframe source code or programmatically:
<a-entity camera position="x y z"></a-entity>
Or via JavaScript:
document.querySelector('[camera]').setAttribute('position', 'x y z');
Then you can set the next waypoint programmatically:
document.querySelector('[camera]').components['tour'].goTo(waypointUuid)
Or you can start the tour:
document.querySelector('[camera]').components['tour'].playTour()
If this does not work for you please describe your desired outcome and share your code with glitch or app creator.
I am having the weirdest problem with an svg filter and I'm not sure how to debug the problem or what the fix might be.
I have a drop shadow filter that I'm applying to a circle. Here is the SVG markup that I'm using (only showing one arc of the donut chart for brevity):
<svg height="240" width="240">
<defs>
<filter width="130%" height="130%" id="dropshadow">
<feGaussianBlur stdDeviation="1" result="blur-out" in="SourceAlpha">
</feGaussianBlur>
<feOffset result="shadow-out" dy="2" dx="1" in="blur-out">
</feOffset>
<feColorMatrix result="color-out" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .3 0" type="matrix" in="shadow-out">
</feColorMatrix>
<feBlend mode="normal" in2="color-out" in="SourceGraphic">
</feBlend>
</filter>
</defs>
<g transform="translate(120,120)" class="donut">
<g class="arcs">
<g class="arc">
<path d="M-63.63961030678927,-63.63961030678928A90,90 0 1,1,-29.811356451234897,84.91927358696267L-27.492695393916627,78.31444119686557A83,83 0 1,0 -58.68986283848344,-58.68986283848345Z" class="a"></path>
<circle transform="translate(91.16631091370033,-20.75942567573879)" filter="url(#dropshadow)" r="17" class="a"></circle>
<text transform="translate(91.16631091370033,-20.75942567573879)" text-anchor="middle" dy=".35em" class="chart-label">30</text>
</g>
</g>
</g>
</svg>
This is how it renders in Internet Explorer, Chrome, and Firefox:
However, when I add the chart to my application which uses angularjs/bootstrap and open it up with Firefox it renders like this:
The drop shadow is no longer working and neither is the fill color for the circle. Even if I select the element and apply a fill directly, it still doesn't work. However, if I delete the filter from the circle (fill="url(#dropshadow)"), the fill color starts working again. Note that the chart renders correctly in all other browsers.
What could be causing the fill to suddenly stop working only in Firefox and only when added to my angularjs/bootstrap project?
When you re-add the filter using inline css (style="filter:...").
Does it work again then?