F7 core version why svg code shows error while put in page-content? <svg xmlns=“http://w3.org/2000/svg” xmlns:xlink=“http://w3.org/1999/xlink” class=“bg-1-splash” viewBox=“0 0 160.46 151.813” >
Error: Uncaught (in promise) Error: NamespaceError: Failed to execute ‘setAttributeNS’ on ‘Element’: ‘http://w3.org/1999/xlink’ is an invalid namespace for attributes.
in template component
even page item if I put more svg codes, rest of the page code automatically disappearing from rendering in browser.
Anyone please help me: how to use 3 to 4 random shapes codes in single page?.
Bests,
Maxartkiller
Just remove xmlns:xlink=“http://w3.org/1999/xlink” attribute
Tried that also, it renders but removed other DOM from rendering. However without svg those are rendering. Looks like limited DOM element are rendering on page. Out of 3 I keep 2, More html elements visible. if I kept 1, even more.
post the full code of the template
<div class=“swiper-container introswiper”>
<div class=“swiper-wrapper”>
<div class=“swiper-slide”>
<div class=“row h-100”>
<div class=“col-100 no-padding-horizontal align-self-center”>
<div class=“row “>
<div class=“col-ld-6 position-relative”>
<svg xmlns=“SVG namespace” width=“416.289” height=“308.987”
viewBox=“0 0 416.289 308.987” class=“slidebg”>
<defs>
<linearGradient id=“linear-gradient2” x1=“0.5” x2=“0.5” y2=“1”
gradientUnits=“objectBoundingBox”>
<stop offset=“0” stop-color=”#09b2fd” />
<stop offset=“1” stop-color="#6b00e5" />
</linearGradient>
</defs>
<path id=“introbg” d=“M868.854,286.227c-42.079,2.312-57.319,10.695-91.165,40.694S736.92,433.075,681.535,431.536,640.766,400,563.844,372.306,494.285,294.077,528.9,247.154s5.917-85.116,48.7-111.97S700.5,179.79,765.381,166.922s94.687-61.032,121.507-38.374,8.786,43,12.947,68.436,20.346,34.68,20.346,55.951S910.933,283.915,868.854,286.227Z”
transform=“translate(-503.892 -122.573)” fill=“url(#linear-gradient2)” />
</svg>
<div class=“text”>Budget</div>
<div class=“circle small one”></div>
<div class=“circle two”></div>
<div class=“circle small three”></div>
<img src=“img/introimg.png” alt="" class=“slideimg” />
</div>
<div class=“col-80 medium-65 large-50 margin-left-auto margin-right-auto”>
<h1 class=“margin-bottom”><span
class=“text-secondary fw-light”>Create<br />Finance</span><br />Goal
Now!</h1>
<p class=“text-secondary”>Great interface to access small details from
components, Easy to use and Easy to develop.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class=“swiper-pagination pagination-rightnumber”></div>
</div>
Similar swiper carousel with same slides svg code 3 slides.
could render 1 slide but for more it stops rendering pagination divs and other slides content. Also without svg it works fine.
Ohh! Let me see hosting somewhere else.
May be server limitation possible or config issue. I am using visual code.
Thank you so much!
