![]() Webflow is a pretty useful tool to create websites quickly. I just wish that there was more character space to begin with to avoid these issues. I love the no code way of thinking, but there will always be a place some tinkering and tweaking. It was a huge pain in the butt to get this done, but I had put a lot of time and effort into importing all of the data into the CMS, so I was not about to give up. This just cuts off the last section of the path I am hovering over and changes it to the name of the element below. So the key line in the code was currentHover = currentHover.split('_') I then used Jquery in another embed code block ĬurrentHover = currentHover.split('_') ĭocument.getElementById("country-name").innerHTML = (currentHover) ĭocument.getElementById(currentHover).style.fill = "orange" Ĭonsole.log ('hovered over ' + currentHover) This took several revisions, but I was finally able to bring the overlay map I was trying to interact within the 10000 characters limit.Įach of the paths on the bottom layers had an ID as the name of each country.Įach of the paths on the overlay layers had the suffix “_btn” appended to the class of the ID of the element below. Next, I created a very low complex polygon overlay in Adobe illustrator. I then placed all of the images within one div block and then overlaid each of the images on top of each other. So, I went into a code editor and between each few paths I would place the closing and then copy the header tag from the SVG which contains the size of the block. So, the only way I could find as a workaround was a bit of a long way around, but it works. Has anyone had any success with importing SVGs using Javascript or something similar? I see many injectors online, but many of these are quite old and also have issues with the everything coming from the same domain, so it might look ok under the webflow domain, but when I publish, I assume that anything hosted under uploads.webflow won’t work either. If I load the into the assets panel and call it on the page, it just displays it as a flat image, all of my separation and classes/IDs are lost and not accessible from the DOM, so any interaction is lost. 10000 characters is the limit, but my map is 80000 characters. If I try to embed the code from the SVG, it is too large. I have the map, I have the item filtering worked out, my problem comes when I try to put the SVG into webflow. I have an SVG map, it has been separated into the countries on the map and when a user mouses over, it highlights the map element and using a bit of javascript, I was going to use it to hide/show items loaded from the CMS. ![]() I wanted to create map which displays items on a page, users can click on a country and the CMS would filter items to show which items were associated with that item or area. A quick question to see if anyone has found a solution to this before I waste a lot of time experimenting. if there’s an SVG artboard/window involved, and AI doesn’t bother to specify this.įor example, here’s a 1" square from Illustrator: ![]() There’s been a bit of discussion on this in the Inkscape mailing list - the problem is an app can specify a different number of pixel units when it makes an SVG file, and there are a couple of different ways apps specify it, so it can be difficult to determine the correct scale, esp.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |