http://continent-news.info/page_20.html
In the left column of news, they opens in a popup window, and loaded with Ajax.
<div class="ukraine_mask1">
<svg height="116px" width="142px">
<defs>
<mask id="ukraine_mask1" maskContentUnits="userSpaceOnUse" maskUnits="userSpaceOnUse">
<image xlink:href="mask/ukraine_mask1.png" height="116px" width="142px">
</mask>
</defs>
<foreignObject class="recov_ukraine_mask1" style="mask: url(#ukraine_mask1);" height="100%" width="100%">
<div class="element_mask mask1_ukraine">
<img src="../inf_images/small/7812_8926.jpeg">
</div>
</foreignObject>
</svg>
</div>
problem in Mozilla:
Some news used map with a mask, the first time the mask works well. But if I click another news with mask, they does not want to re-use mask... =( If I press again the first news, it will work.
The second time, does not want to re-use =(
If in firebug disable / apply
mask: url ("# ukraine_mask1")
in
foreignObject class = "recov_ukraine_mask1"
it will work again ...
Maybe someone have an idea how to solve this problem?
I tried to add a simple style in СSS, but does not help = (
Related
In svelte, I have the option of switching between two images, or using css to change the color of the svg image. Which is "better/ best practice"? (also we use tailwind css).
<div class='w-2 h-2'>
{#if condition}
<Image1/> <--white image
{:else}
<Image2/> <--red image
{/if}
</div>
OR
If the default image is white, this passes red to it. The color variable would be text-red or text-white based on some condition.
<div class='w-2 h-2 ${color}'>
<Image1/>
</div>
Svelte's reactivity can take over colour conditions via CSS. We can avoid the if condition.
App.svelte
<script>
import Icon from "./Icon.svelte"
let stroke = "green";
function changeStroke(){
stroke = "red"
}
</script>
<Icon {stroke}/>
<button on:click={changeStroke}>Change</button>
Icon.svelte
<script>
export let stroke = 'white';
</script>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" {stroke} stroke-width="2">
<!-- Big SVG -->
</svg>
See this example REPL
I am trying to fetch image relative link of an image in order to download it.
You can find an example at this address: https://www.laforet.com/agence-immobiliere/colombes/acheter/colombes/appartement-2-pieces-20909147
The part of the html i see in my browser is this one:
<a href="javascript:void(0)" class="property__fullsize" data-v-6ac7cd72="" data-v-476b61a8="">
<img src="/media/cache/office9/laforet_paris17villiers/catalog/images/pr_p/2/0/9/0/9/1/4/7/20909147c.jpg?method=max&size=medium×tamp=1633799295" alt="" class="**property__photo**" data-v-e11dca30="" data-v-476b61a8="" data-v-6ac7cd72="">
<span class="svg-icon icon-full-size" data-v-10c7d875="" data-v-476b61a8="" data-v-6ac7cd72="">
<svg data-v-10c7d875="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23.249 23.248" role="presentation" width="18" height="18" class="white">
<g data-v-10c7d875="" id="full-size" transform="translate(0 -0.002)">
<path data-v-10c7d875="" id="Tracé_1008" data-name="Tracé 1008" d="deleted for brevity"</path>
<path data-v-10c7d875="" id="Tracé_1009" data-name="Tracé 1009" d="deleted for brevity" transform="translate(-122.883 -122.879)"></path>
<path data-v-10c7d875="" id="Tracé_1010" data-name="Tracé 1010" d="deleted for brevity" transform="translate(-0.004 -122.879)"></path>
<path data-v-10c7d875="" id="Tracé_1011" data-name="Tracé 1011" d="deleted for brevity" transform="translate(-124.215 0)"></path>
</g>
</svg>
<!---->
</span>
</a>
I want to have this part
"/media/cache/office9/laforet_paris17villiers/catalog/images/pr_p/2/0/9/0/9/1/4/7/20909147c.jpg?method=max&size=medium×tamp=1633799295"
The xpath to reach this part should be quite straightforward:
response.xpath('//*[#class="property__photo"]/#src').get()
or
response.css(".property__photo").getall()
There doesn't seem to be any trap, I think I reached the good part of the html.
The problem is that, the output is this
'<img src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%221%22%20height%3D%221%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20%25%7Bw%7D%20%25%7Bh%7D%22%20preserv eAspectRatio%3D%22none%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20style%3D%22fill%3Atransparent%3B%22%3E%3C%2Frect%3E%3C%2Fsvg%3E" alt="" width="1" height="1" class="property__photo" data-v-e11dca30 data-v-476b61a8>'
Why is there a difference between he html I see in my browser and the html scrapy inported ? is that javascript ? What kind of format is it ? Can i extract an image from this string ? Is this behaviour triggered by the webpage or by scrapy ?
EDIT
I decided to find another way to extract the links as adviced by #SuperUser.
I still do not know exactly what function changed the content of the html between what i see in my browser and what scrapy is downloading. Numerous obfuscated javascripts are contained within the page and I cannot find the culprit. Nevertheless, I found a workaround by taking content of flags.
You are trying to Get the ::attr(value).
Please use
response.css('img.property__photo::attr(href)').extract()
I am aware this is a pretty newbie question but I can't figure out a solution on my own.
I have the following SVG hamburger-menu icon:
<svg class="svg-menu" style="margin-top: 1.8rem;margin-right:0.5rem" viewBox="0 0 100 80" width="40" height="18" onclick='fill:red'>>
<rect id="r1" width="100" height="8"></rect>
<rect id="r2" y="30" width="100" height="8"></rect>
<rect id="r3" y="60" width="100" height="8"></rect>
</svg>
At the moment, I can change its color when I click on it by running the following function:
enter code here
$(function(){
$(".svg-menu").on("click",function(){
$("#r1,#r2,#r3").attr("fill","#C8C8C8");
});
});
enter code here
I am unable to figure out how to revert the original color back after clicking on it again (to be clear: on the first click, it changes its color and the menu appears, on the second click the menu disappears but the color remains the same).
Any lead would be greatly appreciated!
Thanks
Well, there was a similar question on StackOverflow in the past. I did a small edit on it, it seems working this way:
let clickNumbers = 0;
$(function(){
$(".svg-menu").on("click",function(){
clickNumbers++;
if(clickNumbers % 2 == 1){
$("#r1,#r2,#r3").attr("fill","#C8C8C8");
} else {
$("#r1,#r2,#r3").attr("fill","#000");
}
});
});
I'm wrapping text using M.Bostock's wrap function but can't find a way to justify it.
Is that even possible in d3 ?
If not, is there a way to "mimic" this kind of text disposition ?
EDIT: Thanks to Logikos suggestion, i've found this example from M.Bostock putting a foreignObject inside svg.
Here is the snippet:
var svg = d3.select("body").append("svg")
.attr("width", 960)
.attr("height", 500);
svg.append("foreignObject")
.attr("width", 480)
.attr("height", 500)
.append("xhtml:body")
.style("font", "14px 'Helvetica Neue'")
.html("<h1>An HTML Foreign Object in SVG</h1><p>Veeery long text");
Then you just need to add in the CSS:
body {text-align: justify;
text-align-last: start;
}
It is not exactly what your looking for but something I used several years ago. Instead of using that function to mimic wrapping you can instead put html inside svg with the foreignObject tag - http://ajaxian.com/archives/foreignobject-hey-youve-got-html-in-my-svg
As html you can style it however you want, text wrapping, justified etc etc.
I have not worked with d3 or SVG's in over 5 years so it is difficult to remember but thought I'd share this in-case it was of any use.
This is the example markup from the link I posted above:
< ?xml version="1.0" standalone="yes"?>
<svg xmlns = "http://www.w3.org/2000/svg">
<rect x="10" y="10" width="100" height="150" fill="gray"/>
<foreignobject x="10" y="10" width="100" height="150">
<body xmlns="http://www.w3.org/1999/xhtml">
<div>Here is a <strong>paragraph</strong> that requires <em>word wrap</em></div>
</body>
</foreignobject>
<circle cx="200" cy="200" r="100" fill="blue" stoke="red"/>
<foreignobject x="120" y="120" width="180" height="180">
<body xmlns="http://www.w3.org/1999/xhtml">
<div>
<ul>
<li><strong>First</strong> item</li>
<li><em>Second</em> item</li>
<li>Thrid item</li>
</ul>
</div>
</body>
</foreignobject>
</svg>
Please note browser support: http://caniuse.com/#search=foreignObject
Which says it will work in everything other than opera mini. Though there are some limitations in IE and Edge:
1 IE11 and below do not support . 2 IE and Edge do not
support applying SVG filter effects to HTML elements using CSS.
You should check it in IE and Edge, in one place the site says it does not support it, in another it says it supports it somewhat...
Is there any way i can enlarge this code so the frame shows bigger then it is rather then me having to scroll up and down to see it, as in width and height. its a show the link in same page code.
code:
<a href='link1.html' target='myIframe'>link1</a><br /> <iframe name='myIframe'></iframe>
figured it out
Code:
<a href='link1.html' target='myIframe'>link1</a><br /> <iframe name='myIframe' width="500" height="400"></iframe>