Div BLock Inside An SVG

I am trying see if this is even possible. If there is a solution that is cross browser compatible I would be interested. I have a simple Pull Quote which I want to put text into the middle of it. Of course I want to keep the same margins around the text block but it should reuse for other screen sizes proportionally. I have been trying different methods I can think of but I cannot get it. Any help would be appreciated. Thanks.

<svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 960 560" style="enable-background:new 0 0 960 560;" xml:space="preserve">
<style type="text/css">
    .PullQuote{fill:#C69214;}
</style>
<path class="PullQuote" d="M126.5,241.8c0,0-28.2-3.8-41.5,36.3v43.2h41.5V280h-16.8c0,0-2.7-15.7,16.8-22V241.8z"/>
<path class="PullQuote" d="M174.5,241.8c0,0-28.2-3.8-41.5,36.3v43.2h41.5V280h-16.8c0,0-2.7-15.7,16.8-22V241.8z"/>
<polygon class="PullQuote" points="124,351.3 134.7,351.3 134.7,394.3 864.3,394.3 864.3,167 134.7,167 134.7,210.7 124,210.7 124,156.7 
    875,156.7 875,404.5 124,404.5 "/>
</svg>

Hi there SunnaH,

does this help…

<!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>
<style>
layer-2 {  
    enable-background:new 0 0 960 560;
 }
.pull-quote {
    fill:#c69214;
 }
text {
    font-family:arial,sans-serif;
    font-size:1.55em;
    font-style:oblique;
    fill:#0d277e;
 }
.small {
    font-size:0.9em;
    font-style:normal;
 }
</style>

</head>
<body>

<svg id="layer-2" 
     version="1.1" 
     xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     xml:space="preserve"
     viewBox="0 0 960 560">

<path class="pull-quote" d="M126.5,241.8c0,0-28.2-3.8-41.5,36.3v43.2h41.5V280h-16.8c0,0-2.7-15.7,16.8-22V241.8z"/>
<path class="pull-quote" d="M174.5,241.8c0,0-28.2-3.8-41.5,36.3v43.2h41.5V280h-16.8c0,0-2.7-15.7,16.8-22V241.8z"/>
<polygon class="pull-quote" points="124,351.3 134.7,351.3 134.7,394.3 864.3,394.3 864.3,167 134.7,167 134.7,210.7 124,210.7 124,156.7 
    875,156.7 875,404.5 124,404.5 "/>

 <text x="210" y="218">Typically, 96 percent of fourth- and  eight-grade</text> 
 <text x="210" y="248">sudents and 85 percent of twelfth-grade students</text>
 <text x="210" y="278">selected  agree to participate.</text>
 <text x="210" y="318" class="small">Source: U.S. Department of Education, Institute of Education Science, National Center for</text>
 <text x="210" y="338" class="small">Education Statistics, National Assessment of Educational Progress [NAEP] 2015 Mathmatics</text>
 <text x="210" y="358" class="small">and Reading Assessments</text>

</svg>

</body>
</html>

coothea

Thanks. This is a good start. Now I have to figure out how to wrap the text in the quote so any amount of text can fit in it. I really appreciate your time and help.

I would have just made the pull quote in svg and the gold borders could simply be css borders on a div. In that way the div will adapt to the content automatically.

Just absolutely place the pull quote in the middle of the left edge and rub out the borders with a white background.

Something like this but of course substitute the quote marks for your svg.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Untitled Document</title>
<style>

.box {
	position:relative;
	border: 13px solid #c69214;
	max-width:960px;
	min-width:300px;
	padding:25px 50px;
	font-style:normal;
	margin:25px auto;
    color: #0d277e;
	box-sizing:border-box;
}
.box:after {
	content:"\201C";
	color:#c69214;
	font-size:200px;
	position:absolute;
	top:0;
	bottom:0;
	left:-50px;
	bottom:0;
	line-height:1;
	background:#fff;
	height:100px;
	width:100px;
	margin:auto;
}
.box cite{font-size:1rem;font-style:normal;}
.box p{
	margin:0 0 25px;
    font-size: 2rem;
    font-style: oblique;
}
@media screen and (max-width:1060px){
	.box{margin:0 50px}	
}
</style>
</head>

<body>
<blockquote class="box">
  <p>Typically, 96 percent of fourth- and eight-gradesudents and 85 percent of twelfth-grade studentsselected agree to participate.</p>
  <footer><cite>Source: U.S. Department of Education, Institute of Education Science, National Center forEducation Statistics, National Assessment of Educational Progress [NAEP] 2015 Mathmaticsand Reading Assessments</cite> </footer>
</blockquote>
</body>
</html>
2 Likes

Wow, has been a decade already? You have always provided wisdom. Much obliged. Thanks Paul.

I cannot figure it out. I am new working working with SVG code. I cannot get the SVG to move. I have it within the quote box only. Here is the code just for the quotes:

<svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
    viewBox="0 0 89.5 83.3" style="enable-background:new 0 0 89.5 83.3;" xml:space="preserve">
<path class="pullQuote" d="M41.5,3.8c0,0-28.2-3.8-41.5,36.3v43.2h41.5V42H24.7c0,0-2.7-15.7,16.8-22V3.8z"/>
<path class="pullQuote" d="M89.5,3.8c0,0-28.2-3.8-41.5,36.3v43.2h41.5V42H72.7c0,0-2.7-15.7,16.8-22V3.8z"/>
</svg>

Something like this?

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Untitled Document</title>
<style>

.box {
	position:relative;
	border: 13px solid #c69214;
	max-width:960px;
	min-width:300px;
	padding:25px 50px;
	font-style:normal;
	margin:25px auto;
    color: #0d277e;
	box-sizing:border-box;
}

svg {
  width: 70px;
  position: absolute;
  left: -44px;
  top: 50%;
  margin-top:-50px;
  z-index: 100;
  fill: #c69214;
  background: white;
  padding: 16px 0 20px;
}

.box cite{font-size:1rem;font-style:normal;}
.box p{
	margin:0 0 25px;
    font-size: 2rem;
    font-style: oblique;
}
@media screen and (max-width:1060px){
	.box{margin:0 50px}
}
</style>
</head>

<body>
<blockquote class="box">
  <p>Typically, 96 percent of fourth- and eight-gradesudents and 85 percent of twelfth-grade studentsselected agree to participate.</p>
  <footer><cite>Source: U.S. Department of Education, Institute of Education Science, National Center forEducation Statistics, National Assessment of Educational Progress [NAEP] 2015 Mathmaticsand Reading Assessments</cite> </footer>

<svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
    viewBox="0 0 89.5 83.3" style="enable-background:new 0 0 89.5 83.3;" xml:space="preserve">
<path class="pullQuote" d="M41.5,3.8c0,0-28.2-3.8-41.5,36.3v43.2h41.5V42H24.7c0,0-2.7-15.7,16.8-22V3.8z"/>
<path class="pullQuote" d="M89.5,3.8c0,0-28.2-3.8-41.5,36.3v43.2h41.5V42H72.7c0,0-2.7-15.7,16.8-22V3.8z"/>
</svg>

</blockquote>

</body>
</html>
3 Likes

Thank you very much.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.