Menu
Community /Pin to ProfileBookmark
@cootheadJan 12.2021 — #Hi there Nardis,
svg's are naturally responsive, as in this example...
[i]coothead[/i]@cootheadJan 12.2021 — #Hi there Nardis,
we really need to to see the [b]complete[/b] svg code. :)
[i]coothead[/i]@cootheadJan 13.2021 — #Hi there Nardis,
I would change this...
...to this...
..and replace this...
...with this...
[i]coothead[/i]@cootheadJan 14.2021 — #
I'm very lucky, I don't have one of those,
or the problems that go with them. :)
I find that[url=https://dictionary.cambridge.org/dictionary/english/shanks-s-pony][u]shanks's pony[/u][/url] does the
business for me.
[i]coothead[/i]
SVG front-end dev question
Trying to add a css media query inline into a svg file, which I know is possible, in order to access the text selector. I can’t match the css to the svg, the text is layered pretty deep in the svg, as can be seen below. In MQ I’m using #Layer15, or text, or I create a class but it’s obviously not specific enough. I only code on the side and this is escaping me. Thanks.
CSS:
`<style media=”(max-width: 481px)”> #Layer15 text { font-size: 28px; }</style>
SVG:
` <g id=”Layer15″ transform=”matrix(1.27552,0,0,1.27552,-26.0515,-224.891)”>
<g transform=”matrix(1,0,0,1,199.824,417.512)”>
<g>
<g>
<g>
<g>
<text id=”mink” x=”0px” y=”0px” style=”font-family:’ArialMT’, ‘Arial’, sans-serif;font-size:58.333px;fill:rgb(115,115,115);”>Exciting graphics</text>
<text x=”0px” y=”58.333px” style=”font-family:’ArialMT’, ‘Arial’, sans-serif;font-size:58.333px;fill:rgb(115,115,115);”>and web design.</text>
</g>
Sign in
to post a comment11 Comments(s) ↴
0
@cootheadJan 12.2021 — #Hi there Nardis,svg's are naturally responsive, as in this example...
<i>
</i><!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>Untitled document</title>
<!--
The internal CSS should be transferred to an external file
<link rel="stylesheet" href="screen.css" media="screen">
-->
<style media="screen">
body {
background-color: #f0f0f0;
font: normal 1em / 1.62em sans-serif;
}
svg {
display: block;
max-width: 30em;
margin: auto;
}
#Layer15 text {
font-family: arialMT, arial, sans-serif;
font-size: 3.75em;
fill: rgb( 115,115,115 );
}
</style>
</head>
<body>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 458 124">
<g id="Layer15">
<text x="0" y="50" >Exciting graphics</text>
<text x="0" y="108" >and web design.</text>
</g>
</svg>
</body>
</html>
[i]coothead[/i]
0
@cootheadJan 12.2021 — #Hi there Nardis,we really need to to see the [b]complete[/b] svg code. :)
[i]coothead[/i]
0
@cootheadJan 13.2021 — #Hi there Nardis,I would change this...
<i>
</i><text id="mink" x="0px" y="0px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:58.333px;fill:rgb(115,115,115);">Exciting graphics</text>
<text x="0px" y="58.333px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:58.333px;fill:rgb(115,115,115);">and web design.</text>
...to this...
<i>
</i><text class="mink" x="0" y="0">Exciting graphics</text>
<text class="mink" x="0" y="58">and web design.</text>
..and replace this...
<i>
</i><defs>
<style media="(max-width: 481px)"> #Layer15 text { font-size: 28px; }</style>
</defs>
...with this...
<i>
</i><defs>
<style>
.mink {
font-family:arialMT, arial, sans-serif;
font-size: 3.625em;
fill:rgb(115,115,115);
}
@media ( max-width: 30em ) {
.mink {
font-size: 1.75em;
}
}
</style>
</defs>
[i]coothead[/i]
0
@cootheadJan 14.2021 — #
This weeks been busy getting
my car back on the road.
[/quote]
I'm very lucky, I don't have one of those,
or the problems that go with them. :)
I find that
business for me.
[i]coothead[/i]