<div class="relative p-8 top-20">
<Icon
icon="material-symbols:format-quote-outline"
color="#97A3B6"
width="35"
height="35"
:rotate="2"
/>
</div>
<p class="text-2xl pl-24 pt-10 text-slate-400 p-10">
Find job here
</p>
<Icon
icon="material-symbols:format-quote-outline"
color="#97A3B6"
width="35"
height="35"
/>
enter image description here
I was input tag for iconify but it's more space like this enter image description here
I want iconify after word "here"
Thank you so much
If you only want quotation marks after the word here, the flex class will solve your problem.
<script src="https://cdn.tailwindcss.com"></script>
<div class="relative top-20 flex p-8">
<svg class="h-8 w-8" clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m21.301 4c.411 0 .699.313.699.663 0 .248-.145.515-.497.702-1.788.948-3.858 4.226-3.858 6.248 3.016-.092 4.326 2.582 4.326 4.258 0 2.007-1.738 4.129-4.308 4.129-3.24 0-4.83-2.547-4.83-5.307 0-5.98 6.834-10.693 8.468-10.693zm-10.833 0c.41 0 .699.313.699.663 0 .248-.145.515-.497.702-1.788.948-3.858 4.226-3.858 6.248 3.016-.092 4.326 2.582 4.326 4.258 0 2.007-1.739 4.129-4.308 4.129-3.241 0-4.83-2.547-4.83-5.307 0-5.98 6.833-10.693 8.468-10.693z" fill-rule="nonzero" /></svg>
<p class="p-10 pl-24 pt-10 text-2xl text-slate-400">Find job here</p>
<svg class="h-8 w-8" clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m2.699 20c-.411 0-.699-.312-.699-.662 0-.249.145-.516.497-.703 1.788-.947 3.858-4.226 3.858-6.248-3.016.092-4.326-2.582-4.326-4.258 0-2.006 1.738-4.129 4.308-4.129 3.241 0 4.83 2.547 4.83 5.307 0 5.981-6.834 10.693-8.468 10.693zm10.833 0c-.41 0-.699-.312-.699-.662 0-.249.145-.516.497-.703 1.788-.947 3.858-4.226 3.858-6.248-3.015.092-4.326-2.582-4.326-4.258 0-2.006 1.739-4.129 4.308-4.129 3.241 0 4.83 2.547 4.83 5.307 0 5.981-6.833 10.693-8.468 10.693z" fill-rule="nonzero" /></svg>
</div>
Related
I have an SVG that represents a flower (for lack of a better description using Polygons), each leaf is linked to a webpage. When hovering over the leaf it changes colour from green to yellow. This flower is shown on every page, it is functioning as a navigation menu.
What I can't get to work is that when a page is visited the color of the leaf to stay yellow, of the visited page.
Scenario:
User hovers over Communities (leaf).
Communities (leaf) color changes from green to yellow.
User clicks on Communities (leaf).
The communities page opens.
What I am trying to achieve.
The Communities leaf stays yellow when the visitor is on the communities page.
The code I have so far:
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 1112 1033.2" style="enable-background:new 0 0 1112 1033.2;" xml:space="preserve">
<style type="text/css">
.st0{fill:#104741;} /*The green color*/
.st0:hover{fill:#F0CB3F;} /*when hover over go yellow*/
.st1{fill:#FFFFFF;} /*standard color for the text*/
.st2{font-family:'Roboto-Bold', sans-serif;} /*Text type*/
.st3{font-size:45px;} /*Text size*/
.st4{fill:#F0CB3F;}
</style>
<a id="Teaching" xlink:href="https://tradeshack.au/teaching-online/" >
<polygon id="Teaching_00000051348337870285784970000016147037851407144324_" class="st0" points="547,303.2 368,403.2 189,303.2
189,103.3 368,3.3 547,103.3 "/>
<text transform="matrix(1 0 0 1 278.9999 223.2402)" class="st1 st2 st3">Teaching</text>
</a>
<a id="Learning" xlink:href="https://tradeshack.au/local-online-courses/" >
<polygon id="Learning_00000173841655452649517230000006122666773149035708_" class="st0" points="927,307.2 748,407.2 569,307.2
569,107.2 748,7.2 927,107.2 "/>
<text transform="matrix(1 0 0 1 658.3733 232.2399)" class="st1 st2 st3">Learning</text>
</a>
<a id="Home" xlink:href="https://tradeshack.au" >
<polygon id="Home_00000093143914122244361730000008396680916595534749_" class="st4" points="736,618.3 557,718.2 378,618.3
378,418.3 557,318.3 736,418.3 "/>
<image style="overflow:visible;" width="214" height="184" id="house_xA0_Image_00000048475658377819784140000012594620538900893574_" xlink:href="https://tradeshack.au/wp-content/uploads/2022/08/C6FE9EEE.png" transform="matrix(1.6822 0 0 1.7609 378 358.24)">
</image>
</a>
<a id="Growing" xlink:href="https://tradeshack.au/backyard-growers/" >
<polygon id="Growing_00000175323106510374922210000005630539508612177844_" class="st0" points="1112,621.4 933,721.4 754,621.4
754,421.4 933,321.5 1112,421.4 "/>
<text transform="matrix(1 0 0 1 851.8009 538.2402)" class="st1 st2 st3">Growing</text>
</a>
<a id="News" xlink:href="https://tradeshack.au/local-news/" >
<polygon id="News_00000098220304566128214590000010493917784746845323_" class="st0" points="360,621.2 181,721.2 2,621.2 2,421.3
181,321.3 360,421.3 "/>
<text transform="matrix(1 0 0 1 123.8486 538.24)" class="st1 st2 st3">News</text>
</a>
<a id="Local_Exchange" xlink:href="https://tradeshack.au/local-edible-exchange/" >
<polygon id="Local_Exchange_00000052093847367928459750000017120200193115507858_" class="st0" points="547,937.2 368,1037.2
189,937.2 189,737.2 368,637.2 547,737.2 "/>
<text transform="matrix(1 0 0 1 210.6318 853.24)" class="st1 st2 st3">Local Exchange</text>
</a>
<a id="Communities" xlink:href="https://tradeshack.au/local-communities/" >
<polygon id="Communities_00000128464967429771677690000007271752719640598663_" class="st0" points="927,937.2 748,1037.2
569,937.2 569,737.2 748,637.2 927,737.2 "/>
<text transform="matrix(1 0 0 1 612.1426 853.24)" class="st1 st2 st3">Communities</text>
</a>
</svg>
So how do I go about getting that done ;-)>
You can see a working example, without the bit that I cannot figure out, on my website Tradeshack website where the example is.
This is resolved now by putting a page specific SVG on each page.
I'm trying to make a svg graphic in my web page. I want to write in it a LaTeX formula using mathjax but it doesn't work. Here is my code, although I think it is not the problem. Can anyone help me? Thanks a lot!
<svg height="250" width="450" >
<line x1="0" y1="200" x2="450" y2="200" style="stroke:rgb(0,0,0);stroke-width:2" ></line>
<line x1="230" y1="200" x2="230" y2="0" style="stroke:rgb(0,0,0);stroke-width:1" />
<path d="M 313 200 A 283 283 0 0 0 230 0 l -200 200 m 100 -100" fill="none" stroke="black" stroke-width="1"/>
<text x="10" y="30" style="fill:blue;font-size:10px">$\sqrt{2}$</text>
</svg>
This works:
<script src="https://cdn.jsdelivr.net/npm/mathjax#3/es5/tex-mml-chtml.js"></script>
<svg height="250" width="450" >
<line x1="0" y1="200" x2="450" y2="200" style="stroke:rgb(0,0,0);stroke-width:2" ></line>
<line x1="230" y1="200" x2="230" y2="0" style="stroke:rgb(0,0,0);stroke-width:1" />
<path d="M 313 200 A 283 283 0 0 0 230 0 l -200 200 m 100 -100" fill="none" stroke="black" stroke-width="1"/>
<!--text x="10" y="30" style="fill:blue;font-size:10px">$\sqrt{2}$</text-->
<foreignObject x="10" y="20" width="100" height="100">
<div xmlns="http://www.w3.org/1999/xhtml">
$$\sqrt{2}$$
</div>
</foreignObject>
</svg>
I am totally new to scrapy and just started yesterday to use it.
There is a page with ratings for products I want to get. Unfortunately the ratings are not texts but stars.
Let's say a product got two stars, it looks like this:
<div class="index-classRating">
<div class="index-classIcon index-red">
<svg viewBox="0 0 32 32">
<use xlink:href="/static/media/icons.f88ec073.svg#wci-starrating-full">
#shadow-root (closed)
<svg id="wci-starrating-full" viewBox="0 0 512 512" width="100%" height="100%">
<path d="1 2 3"></path>
</svg>
</use>
</svg>
</div>
<div class="index-classIcon index-red">
<svg viewBox="0 0 32 32">
<use xlink:href="/static/media/icons.f88ec073.svg#wci-starrating-full">
#shadow-root (closed)
<svg id="wci-starrating-full" viewBox="0 0 512 512" width="100%" height="100%">
<path d="1 2 3"></path>
</svg>
</use>
</svg>
</div>
So I want to count how many stars aka "/static/media/icons.f88ec073.svg#wci-starrating-full" or "wci-starrating-full" are there.
So I tried
stars = response.xpath('//div[#class="index-classIcon index_red"]/svg[#viewBox="0 0 32 32"]/use[#xlink:href="/static/media/icons.f88ec073.svg#wci-starrating-full"]/svg/#id').extract()
and got an empty list.
But I want to have something like
stars = ["wci-starrating-full","wci-starrating-full"]
viewbox must be written lowercase, "index_red" has dash not hyphen
try
stars=response.xpath('//div[#class="index-classIcon index-red"]/svg[#viewbox="0 0 32 32"]/use/svg/#id').extract()
Total example: (please copy-paste into python)
import scrapy
response=scrapy.http.HtmlResponse(url='just_a_string',encoding='utf-8',body=u'''
<div class="index-classRating">
<div class="index-classIcon index-red">
<svg viewBox="0 0 32 32">
<use xlink:href="/static/media/icons.f88ec073.svg#wci-starrating-full">
#shadow-root (closed)
<svg id="wci-starrating-full" viewBox="0 0 512 512" width="100%" height="100%">
<path d="1 2 3"></path>
</svg>
</use>
</svg>
</div>
<div class="index-classIcon index-red">
<svg viewBox="0 0 32 32">
<use xlink:href="/static/media/icons.f88ec073.svg#wci-starrating-full">
#shadow-root (closed)
<svg id="wci-starrating-full" viewBox="0 0 512 512" width="100%" height="100%">
<path d="1 2 3"></path>
</svg>
</use>
</svg>
</div>
''')
stars=response.xpath('//div[#class="index-classIcon index-red"]/svg[#viewbox="0 0 32 32"]/use/svg/#id').extract()
print(repr(stars))
I have all my icons added as symbols in the html file, eg:
<symbol id="flag-bg"><g fill-rule="evenodd" stroke-width="1pt"><path fill="#d62612" d="M0 319.997h640V480H0z"/><path fill="#fff" d="M0 0h640v160.003H0z"/><path fill="#00966e" d="M0 160.003h640v160.003H0z"/></g></symbol>
And I want to use it to display an icon of 32 by 24
<svg width="32" height="24" viewbox="0 0 32 24" id="#lg-bg"><use href="#flag-bg"><title></title></use></svg>
But it doesn't resize the flag to fill the size. What's the magic properties to make it happen?
You have to set a viewBox attribute on the <symbol> element that matches the size of its grafical content. To find out what size that is, you can use the .getBBox() function. Temporarily exchange <symbol> for <svg>, and don't mind if the grafical output makes no sense. You only need the numbers on the console:
console.log(document.querySelector('#flag-bg').getBBox())
<svg>
<svg id="flag-bg">
<g fill-rule="evenodd" stroke-width="1pt">
<path fill="#d62612" d="M0 319.997h640V480H0z"/>
<path fill="#fff" d="M0 0h640v160.003H0z"/>
<path fill="#00966e" d="M0 160.003h640v160.003H0z"/>
</g>
</svg>
</svg>
Then, use these values for your viewBox. There is no need to set a size on the <use> element, it defaults to 100% (of the surrounding <svg>) element.
<svg width="0" height="0">
<symbol id="flag-bg" viewbox="0 0 640 480">
<g fill-rule="evenodd" stroke-width="1pt">
<path fill="#d62612" d="M0 319.997h640V480H0z"/>
<path fill="#fff" d="M0 0h640v160.003H0z"/>
<path fill="#00966e" d="M0 160.003h640v160.003H0z"/>
</g>
</symbol>
</svg>
<svg width="32" height="24" viewbox="0 0 32 24" id="#lg-bg">
<use href="#flag-bg"><title></title></use>
</svg>
you can use viewbox property to scale your svg icon
check this code and reference link in below
<h1>Auto-Scaling an SVG Image with a <code>viewBox</code>
<div>—watch out for IE and table layouts</div></h1>
<figure>
<figcaption><code>img</code>, 100xauto height</figcaption>
<div>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/91525/potofgold.svg"
style="width:100px">
</div>
</figure>
<figure>
<figcaption><code>img</code>, auto widthx50</figcaption>
<div>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/91525/potofgold.svg"
style="height:50px">
</div>
</figure>
<figure>
<figcaption><code>img</code>, auto size</figcaption>
<div>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/91525/potofgold.svg">
</div>
</figure>
you can use viewbox property and scale your svg icons in it ..
reference link clickhere
It's quite easy to create a text with different font sizes for different words in HTML. But what about <text> in a svg?
I think this explains quite well about my question: https://jsfiddle.net/4atoctra/1/
Everything's here below:
<div>
This is a text, and you can have <span style="font-size:25px">big</span> and <span style="font-size:11px">small</span> sizes easily inline.
</div>
<div style="margin-top:50px">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="none" x="0px" y="0px" width="360px" height="126px" viewBox="0 0 360 126">
<text><tspan x="150" text-anchor="middle" y="10" font-family="Tahoma" font-weight="bold" font-size="11" fill="#003863" xml:space="preserve">What about this in a <svg>?</tspan></text></svg>
</div>
You can just change the font-size on each tspan element?
<svg viewBox="0 0 500 100" width="500px">
<text x="0" y="50" font-size="20">It's not <tspan font-size="30">that hard</tspan><tspan font-size="40"> to change size?</tspan></text>
</svg>
You can use a <foreignObject> to insert HTML markup into an SVG document:
<svg width="220" height="120" viewBox="0 0 220 120">
<rect x="10" y="10" width="200" height="100" fill="#ff9" stroke="none" />
<foreignObject x="15" y="15" width="190" height="90">
<div xmlns="http://www.w3.org/1999/xhtml" style="width:190px; height:90px; overflow-y:auto">This is a text, and you can have <span style="font-size:25px">big</span> and <span style="font-size:11px">small</span> sizes easily inline.
</div>
</foreignObject>
</svg>