<img src="test.svg">$(document).ready(function(){
jQuery('img[src*=".svg"]').each(function(){
var $img = jQuery(this);
var imgID = $img.attr('id');
var imgClass = $img.attr('class');
var imgURL = $img.attr('src');
jQuery.get(imgURL, function(data) {
// Get the SVG tag, ignore the rest
var $svg = jQuery(data).find('svg');
// Add replaced image ID to the new SVG
if(typeof imgID !== 'undefined') {
$svg = $svg.attr('id', imgID);
}
// Add replaced image classes to the new SVG
if(typeof imgClass !== 'undefined') {
$svg = $svg.attr('class', imgClass+' replaced-svg');
}
// Remove any invalid XML tags as per http://validator.w3.org
$svg = $svg.removeAttr('xmlns:a');
// Replace image with new SVG
$img.replaceWith($svg);
}, 'xml');
});
});<symbol/> и прописываем в неге атрибуты из тега <svg/>
<a href="#?param=1">Ссылка с параметром 1</a>
<a href="#?param=2">Ссылка с параметром 2</a>
<a href="#?param=3">Ссылка с параметром 3</a><select name="" id="" >
<option value="1" <? if($_GET["param"] === "1") :?>selected<? endif; ?>>1</option>
<option value="2" <? if($_GET["param"] === "2") :?>selected<? endif; ?>>2</option>
<option value="3" <? if($_GET["param"] === "3") :?>selected<? endif; ?>>3</option>
</select>
А если сделать текст за областью SVG он уже себя так не будет вести, придётся что-то на JS дополнительно мудрить, а это гемор...)
За position: fixed спасибо, теперь конечно текст видно, но он перестал масштабироватся в зависимости от размера SVG. То есть по сути текст ведёт себя так, как будто он за областью SVG(