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>
<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>
>it's obviously not specific enough
<style>
svg {
overflow: visible;
}
<i> </i> #Layer15 text {
<i> </i> font-size: 58.333px;
<i> </i> }
<i> </i></style>
<i> </i><style media="(max-width: 481px)">
<i> </i> #Layer15 text {
<i> </i> font-size: 28px;
<i> </i> }
</style>
!important
`<?xml version="1.0" encoding="UTF-8" standalone="no"?><br/>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><br/>
<svg width="100%" height="100%" viewBox="0 0 4175 3117" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;"><br/>
<defs><br/>
<style media="(max-width: 481px)"> #Layer15 text { font-size: 28px; }</style></defs><br/>
<g transform="matrix(4.16667,0,0,4.16667,0,0)"><br/>
<rect id="Artboard1" x="0" y="0" style="fill:none;"/><br/>
<g><br/>
<g transform="matrix(4.15369,0,0,4.1541,0,0)"><br/>
<use id="_Image3_" serif:id="_Image3" xlink:href="#_Image1" x="0" y="0" width="241px" height="180px"/><br/>
</g><br/>
<g id="Bldg"><br/>
<path id="Outline" d="M528.938,1054.35L422.946,1057.72L171.437,1049.4L171.429,813.204L510.129,763.338L530.154,772.117L1161.43,688.725L1791.65,845.458L1791.66,1046.15L1734.26,1049.26L1160.45,1081.22L528.917,1060.45" style="fill:url(#_Linear2);stroke:rgb(201,205,228);stroke-width:1.96px;"/><br/>
<g id="Bldg1" serif:id="Bldg"><br/>
<g id="Horizontal" opacity="0.35"><br/>
<path id="bot6" d="M171.508,845.246L1156.76,728.325L1791.7,869.754" style="fill:none;stroke:rgb(171,197,213);stroke-width:1.79px;"/><br/>
</g><br/>
<g id="L-Verticle" serif:id="L Verticle" opacity="0.35"><br/>
<path id="s4" d="M788.204,1069.23L788.246,738.722" style="fill:none;stroke:rgb(215,235,237);stroke-width:8.88px;"/><br/>
<path id="s5" d="M930.054,1073.8L930.054,719.867" style="fill:none;stroke:rgb(215,235,237);stroke-width:8.88px;"/><br/>
</g><br/>
</g><br/>
</g><br/>
<g id="Dogs"><br/>
<g id="dog2"><br/>
<g><br/>
<g><br/>
<g id="Layer2"><br/>
<path d="M215.6,853.588C212.667,855.162 200.492,864.071 203.821,864.071C208.954,864.071 215.65,854.033 217.9,850.463C219.158,848.471 223.475,843.387 221.283,844.25C215.617,846.475 211.008,852.35 204.921,852.35C204.167,852.35 205.742,851.079 206.179,850.462C210.271,844.704 215.883,839.146 219.396,833.079C221.462,829.508 212.979,832.729 213.417,832.45C218.262,829.371 212.525,818.954 207.975,813.358C207.417,808.35 217.033,820.183 217.033,820.183C217.033,820.183 218.867,817.354 219.629,815.854C223.904,807.479 225.517,799.375 229.242,790.846C231.625,785.383 221.946,792.458 221.533,792.183C221.117,791.904 232.7,772.325 232.387,768.9C232.021,764.867 220.275,769.846 220.275,769.846C220.275,769.846 230.817,757.471 228.375,751.125C227.687,749.333 221.367,757.417 220.508,757.575C215.704,758.45 224.921,749.621 222.633,739.562C221.687,735.404 211.454,742.217 211.308,739.954C210.917,733.879 216.787,727.217 217.912,721.079C218.954,715.4 214.621,717.858 213.275,714.629C211.108,709.429 220.804,698.808 222.004,693.237C222.679,690.104 218.512,691.733 219.646,689.304C222.517,683.129 238.821,669.708 237.262,664.45C236.408,661.558 229.6,664.604 227.904,663.192C224.667,660.492 232.467,645.425 231.992,641.008C231.254,634.1 245.308,622.883 245.308,613.796C245.308,607.637 250.183,601.267 250.183,594.292C250.183,588.346 252.308,582.846 252.308,577.067C252.308,574.037 248.279,566.033 250.421,568.175C252.458,570.217 258.283,564.558 258.283,564.558C258.283,564.558 255.187,563.671 254.196,562.512C249.437,556.967 244.879,538.954 245.462,531.683C247.421,507.421 251.737,452.029 276.721,430.408C283.554,424.496 308.554,431.146 325.621,454.567C335.358,467.925 353.742,474.354 367.692,483.075C370.412,484.775 399.417,474.396 401.908,473.4C404.487,472.367 471.467,479.204 474.112,480.792C475.767,481.783 490.729,469.929 493.462,468.837C508.054,463 550.167,431.15 566.925,441.625C589.221,455.558 568.004,499.942 564.329,515.796C561.858,526.462 551.883,571.196 555.208,579.504C559.625,590.55 562.771,601.396 564.567,613.954C565.767,622.362 562.296,632.454 565.196,640.3C567.246,645.85 572.5,648.879 573.925,654.854C576.804,666.9 572.229,681.029 576.05,692.842C581.858,710.792 597.879,725.392 605.387,742.629C613.929,762.242 604.254,772.467 606.017,779.517C607.287,784.596 625.225,785.737 623.717,788.25C618.183,797.471 591.071,797.987 589.029,807.521C588.917,808.042 613.708,812.079 615.454,812.079C618.758,812.079 605.35,810.046 605.625,813.337C606.129,819.412 617.675,816.954 620.096,820.183C620.779,821.087 611.271,823.417 612.625,825.45C612.975,825.979 613.583,826.292 614.121,826.633C617.658,828.871 608.813,828.304 610.975,831.9C613.167,835.558 618.333,836.171 615.85,841.971C612.983,848.654 600.562,844.862 595.004,846.846C587.304,849.596 576.029,851.987 578.567,861.633C578.725,862.237 579.413,863.529 578.567,863.912C575.85,865.146 570.65,857.904 567.554,860.296C559.154,866.787 563.821,881.179 560.475,889.083C559.554,891.262 552.283,890.142 550.096,892.229C547.087,895.092 548.112,901.946 545.375,904.183C545.162,904.358 542,896.562 540.262,897.183C535.829,898.767 540.362,916.821 538.767,920.621C538.117,922.179 530.354,915.529 528.542,915.196C523.671,914.3 522.158,920.629 518.396,922.508C514.283,924.567 500.446,924.692 496.562,925.25C490.912,926.054 495.362,940.446 491.925,943.417C489.379,945.612 482.55,927.9 476.979,933.979C475.971,935.079 472.012,950.812 469.35,949.629C467.008,948.592 466.679,943.55 466.596,941.371C466.542,939.904 467.062,935.575 466.596,936.967C464.796,942.375 468.883,957.679 464,961.587C463.1,962.308 457.333,944.067 456.137,944.912C451.979,947.846 452.996,965.679 449.133,971.575C446.65,975.375 444.158,968.825 441.9,972.521C440.292,975.142 437.467,986.742 433.562,987.462C429.529,988.208 431.783,974.892 432.067,973.15C432.354,971.383 434.117,966.95 432.537,967.8C428.662,969.887 426.125,981.671 422.942,985.812C422.587,986.275 415.692,992.408 415.471,991.633C414.979,989.904 421.754,979.942 417.358,979.362C410.358,978.442 385.454,1008.09 380.392,1003.75C377.812,1001.53 382.575,994.95 378.662,993.521C368.9,989.95 361.804,1001.14 353.096,1002.64C344.425,1004.14 346.721,992.967 340.354,991.867C332.629,990.537 327.687,998.867 321.008,998.867C318.038,998.867 321.704,987.912 319.513,985.812C317.079,983.479 302.675,990.883 306.3,981.408C306.758,980.208 308.188,978.921 308.188,977.633C308.188,975.996 301.771,984.617 295.838,987.462C289.725,990.396 280.908,994.021 274.758,994.304C271.821,994.442 276.992,987.058 275.621,985.575C273.529,983.304 263.367,989.492 262.879,987.15C262.558,985.608 265.875,974.592 262.25,974.8C255.4,975.192 249.663,985.575 243.533,985.575C243.154,985.575 243.908,984.912 244.163,984.633C245.783,982.829 263.079,960.921 261.621,959.462C260.746,958.587 257.908,961.312 257.296,961.742C252.104,965.396 231.088,993.646 222.608,979.521C222.217,978.862 223.492,977.204 223.713,976.687C230.183,961.383 232.063,952.033 241.217,938.304C241.463,937.933 245.35,932.687 245.071,932.404C242.408,929.746 212.471,958.983 202.563,946.029C193.625,934.342 228.717,919.525 225.767,909.687C224.238,904.592 205.75,915.108 204.292,911.025C201.538,903.312 217.938,896.633 216.8,889.792C216.138,885.812 204.538,892.317 203.192,890.971C203.038,890.817 217.621,877.75 218.767,869.733C219.525,864.425 212.304,868.121 211.767,865.958C210.85,862.296 219.708,857.229 220.654,853.454C221.121,851.579 216.004,853.917 215.775,853.687C214.371,852.283 219.054,835.571 220.417,833.787" style="fill:rgb(178,166,163);stroke:rgb(128,130,251);stroke-width:1.67px;"/><br/>
</g><br/>
<g id="face"><br/>
<path d="M391.254,685.725C391.404,681.575 394.554,664.542 423.5,664.542C444.004,666.454 451.708,674.55 452.504,688.388C451.967,706.833 430.637,712.504 425.283,711.467C419.567,712.642 421.558,721.346 420.133,721.225C418.712,721.104 416.746,710.75 416.746,710.75C416.746,710.75 390.596,703.925 391.254,685.725Z" style="fill:rgb(33,33,33);fill-opacity:0.8;"/><br/>
<path id="lnost" d="M410.971,677.442C407.463,677.542 401.425,680.446 400.217,686.529C399.588,689.688 403.221,694.508 409.758,695.771C413.208,696.438 421.542,692.913 421.271,685.925C421.038,679.825 414.479,677.338 410.971,677.442Z" style="fill:rgb(33,33,33);"/><br/>
<path id="rnost" d="M438.392,678.196C431.446,677.208 424.883,681.954 427.179,689.104C428.546,693.346 430.533,696.646 437.333,696.375C444.825,696.079 447.783,689.713 447.029,686.679C446.271,683.65 443.767,678.963 438.392,678.196Z" style="fill:rgb(33,33,33);"/><br/>
<path id="reye" d="M465.192,621.621C465.192,621.621 459.738,606.625 468.979,607.988C478.221,609.35 470.042,613.288 473.071,612.683C476.1,612.075 478.071,610.713 477.917,607.683C477.767,604.654 477.721,599.55 480.342,599.2C484.888,598.592 492.642,596.829 492.767,600.867C493.521,625.838 465.192,621.621 465.192,621.621Z" style="fill:rgb(33,33,33);stroke:rgb(158,160,226);stroke-width:4.46px;"/><br/>
<path id="leye" d="M370.692,611.204C370.692,611.204 376.146,596.208 366.904,597.571C357.662,598.933 365.846,602.875 362.817,602.267C359.787,601.662 357.817,600.3 357.967,597.267C358.121,594.238 358.167,589.133 355.542,588.783C351,588.179 343.242,586.413 343.121,590.45C342.363,615.421 370.692,611.204 370.692,611.204Z" style="fill:rgb(33,33,33);stroke:rgb(158,160,226);stroke-width:4.46px;"/><br/>
<path d="M374.296,736.117C374.296,736.117 412.754,744.4 450.921,743.367C439.088,738.929 417.054,737.096 417.054,737.096C417.054,737.096 396.254,734.442 377.121,736.117" style="fill:rgb(95,71,71);"/><br/>
</g><br/>
</g><br/>
</g><br/>
</g><br/>
</g><br/>
<g id="Layer15" transform="matrix(1.27552,0,0,1.27552,-26.0515,-224.891)"><br/>
<g transform="matrix(1,0,0,1,199.824,417.512)"><br/>
<g><br/>
<g><br/>
<g><br/>
<g><br/>
<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><br/>
<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><br/>
</g><br/>
</g><br/>
</g><br/>
</g><br/>
</g><br/>
<g><br/>
<path d="M216.695,294.361L223.629,315.698L246.066,315.698L227.916,328.89L234.849,350.227L216.695,337.04L198.545,350.227L205.479,328.89L187.324,315.698L209.762,315.698L216.695,294.361Z" style="fill:rgb(255,236,0);"/><br/>
<g><br/>
<path d="M286.487,294.361L293.42,315.698L315.858,315.698L297.708,328.89L304.641,350.227L286.487,337.04L268.337,350.227L275.27,328.89L257.116,315.698L279.554,315.698L286.487,294.361Z" style="fill:rgb(255,236,0);"/><br/>
</g><br/>
<g><br/>
<path d="M356.279,294.361L363.212,315.698L385.649,315.698L367.499,328.89L374.433,350.227L356.279,337.04L338.129,350.227L345.062,328.89L326.908,315.698L349.345,315.698L356.279,294.361Z" style="fill:rgb(255,236,0);"/><br/>
</g><br/>
<g><br/>
<path d="M426.07,294.361L433.004,315.698L455.441,315.698L437.291,328.89L444.224,350.227L426.07,337.04L407.92,350.227L414.854,328.89L396.699,315.698L419.137,315.698L426.07,294.361Z" style="fill:rgb(255,236,0);"/><br/>
</g><br/>
<g><br/>
<path d="M495.862,294.361L502.795,315.698L525.233,315.698L507.083,328.89L514.016,350.227L495.862,337.04L477.712,350.227L484.645,328.89L466.491,315.698L488.929,315.698L495.862,294.361Z" style="fill:rgb(255,236,0);"/><br/>
</g><br/>
</g><br/>
<g transform="matrix(2.84819,0,0,2.84819,-26.3919,200.017)"><br/>
<circle cx="88.451" cy="17.134" r="10.906" style="fill:url(#_Linear3);"/><br/>
</g><br/>
<g transform="matrix(1.06058,0,0,1.06058,211.623,262.57)"><br/>
<text x="0px" y="0px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:39.706px;fill:rgb(255,245,245);">R</text><br/>
</g><br/>
<g transform="matrix(1,0,0,1,276.144,264.083)"><br/>
<text x="0px" y="0px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:41.667px;fill:rgb(128,128,128);">73 reviews</text><br/>
</g><br/>
</g><br/>
</g><br/>
</g><br/>
<defs><br/>
<image id="_Image1" width="241px" height="180px" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPEAAAC0CAYAAABFXsrWAAAACXBIWXMAAA7EAAAOxAGVKw4bAAADP0lEQVR4nO3dXXLTMACF0ZjxqlkSu2Il5QEeOpBOG+JY+qxzVuBJIt+rHzvb9x8/325A1rfRFwA8Z79t2+hrAJ6wG8LQpk5DnDq9EN/0NanTECeJIU4SQ9w++gLgLg3xy9RpiFOnIU4SQ5w5MRxgZBSq0xCnTkOcJIY4D0BAnDoNcfvt5ukWKNs3SQxp5sQQZ3WaDq3xLgtbECeJIU4SQ5wHIOBFzopHdfoM2g4vpE5DnH1iiHNiC+IkMcR9uDotoaFBnYY4dRriJDHESWKIc9gD4hy7hDgPQMCZXtB81ekBfOIcSZ2GOEkMcZIY4ixs8TltbWrqNMSp0xAniSHOnJjLWS2W1GmIU6chThJDnDkxjHRAE1anIU6dhjhJDHHesQVx6jT/R4ObhjoNcZIY4iQxxFnYgrjlTmz52xquxn8xQZw6DXGSGOIkMcTZJ4a4fbkXEnFZq/6UJTHEGcQQp05DnCSGuOWOXXKf4wJduy8P2iQxPGi23DMnhjh1GuLU6Se5BzKaOg1xDntwKj+340liiDOIIW7swpY7CDzNFhPE2WIKcb/lHkkMcRa2IM7bLiFOnYa4ZRa23Ku4KnNiiDOI+ZcfRYoHICBOEkPclxa2rGDDvGwxQdwyW0xncU/kbObEEKdOQ5wkhjhzYqj4IHGnOuwx0aVAhjoNcQZxlS+OP6aq08DjJDHEGcQQp05DnCSGOG+7hLh9295GXwPwBHUa4pydhgONCMXHk1h0w1RsMUGcOTHEebMHxNknhjh1GuIsbEHQ+2EriSHOIIY4J7auwt14WbaYIE4Ss5yr5ZYkhjgLWxDnxBbESWKIc2KLh/i5zEcSQ5wtJniRs3Z+bDFBnDoNcer0ibQeXkGdhjhJzJRky9eZE0OcOg1xzk5DnDoNcc5OX5CvdC2SGOIMYohTpyFOEkOcE1t/cVOjxmEPiFOnIc6JLYhTpyHu0IUt9wM4nzkxxNliGshUhiOYE0OcOg1xkhji7BNDXHZhS4GA38yJIc6cGOLMiSFOnYb3ggNCnYY4dRri1OnP+ICYnLddQpwkhjiDGOLUaRjgyGEniSHOFhPEOewBceo0xKnTEKdOQ5wkhjhzYohTpyHuFxWSB5SLjW2AAAAAAElFTkSuQmCC"/><br/>
<linearGradient id="_Linear2" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1620.68,0,0,1620.68,171.482,884.971)"><stop offset="0" style="stop-color:rgb(234,215,198);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(202,223,221);stop-opacity:1"/></linearGradient><br/>
<linearGradient id="_Linear3" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(21.8127,0,0,21.8127,77.5447,17.1339)"><stop offset="0" style="stop-color:rgb(137,108,108);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(144,160,184);stop-opacity:1"/></linearGradient><br/>
</defs><br/>
</svg>
!important
`<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>
<i>
</i><text class="mink" x="0" y="0">Exciting graphics</text>
<text class="mink" x="0" y="58">and web design.</text>
<i>
</i><defs>
<style media="(max-width: 481px)"> #Layer15 text { font-size: 28px; }</style>
</defs>
<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>
This weeks been busy getting
my car back on the road.
[/quote]
0.1.9 — BETA 4.25